3.5 设置字体样式

文本包含很多属性，通过设置这些属性，用户可以控制网页效果。一个网页的设计效果是否精致，很大程度上取决于文本样式设计。

3.5.1 实战演练：定义字体类型

在网页中，中文字体默认显示为宋体，如果选择【修改】｜【管理字体】命令，可以打开【管理字体】对话框，重设字体类型。

【操作步骤】

第1步，启动Dreamweaver CC，打开3.4节创建的网页文档test.html，另存为test1.html。

第2步，在编辑窗口中拖选文本“《雨霖铃》”。

第3步，选择【修改】｜【管理字体】命令，打开【管理字体】对话框，切换到【自定义字体堆栈】选项卡。在【可用字体】列表框中选择一种本地系统中可用字体类型，如“隶书”。

第4步，单击按钮，把选择的可用字体添加到【选择的字体】列表框中，如图3.21所示。

图3.21 添加可用字体

第5步，在【属性】面板中，切换到CSS选项卡，在【字体】下拉列表框中可以看到新添加的字体，选择【隶书】，即可为当前标题应用隶书字体效果，如图3.22所示。

图3.22 应用字体类型样式

第6步，切换到【代码】视图，可以看到Dreamweaver CC自动使用CSS定义的字体样式属性。

     <p class="red center"><span style="font-family: '隶书'">《雨霖铃》 </span></p>
     <p class="red center">柳永</p>

3.5.2 实战演练：定义字体颜色

选择【格式】｜【颜色】命令，打开【颜色】面板，利用该面板可以为字体设置颜色。

【操作步骤】

第1步，启动Dreamweaver CC，打开3.5.1节的网页文档test1.html，另存为test2.html。

第2步，在编辑窗口中拖选段落文本“《雨霖铃》”。在【属性】面板中设置字体格式为“标题1”。

第3步，拖选段落文本“柳永”。在【属性】面板中设置字体格式为“标题2”。同时修改字体“柳永”应用类样式为.center，而不是复合类样式，清除红色字体效果，仅让二级标题居中显示，如图3.23所示。

图3.23 修改标题文本格式化和类样式

第4步，拖选词正文的第一段文本，在【属性】面板中切换到CSS选项卡，单击“颜色”小方块，从弹出的颜色面板中选择一种颜色，这里设置颜色为浅绿色，RGBa值显示为rgba(60,255,60,1)，如图3.24所示。

图3.24 定义第一段文本颜色

第5步，拖选第二段文本，设置字体颜色为rgba(60,255,60,0.9)，用户也可以直接在【属性】面板的颜色文本框中输入“rgba(60,255,60,0.9)”，如图3.25所示。

图3.25 定义第二段文本颜色

第6步，以同样的方式执行如下操作：

设置第3段文本字体颜色为rgba(60,255,60,0.8)。

设置第4段文本字体颜色为rgba(60,255,60,0.7)。

设置第5段文本字体颜色为rgba(60,255,60,0.6)。

设置第6段文本字体颜色为rgba(60,255,60,0.5)。

设置第7段文本字体颜色为rgba(60,255,60,0.4)。

设置第8段文本字体颜色为rgba(60,255,60,0.3)。

第7步，选中标题1文本“《雨霖铃》”，在【属性】面板中修改字体颜色为green。

第8步，保存文档，按F12键，在浏览器中预览，则显示效果如图3.26所示。

图3.26 定义字体颜色效果

【拓展】

在网页中表示颜色有3种方法：颜色名、百分比和数值。

（1）使用颜色名是最简单的方法，目前能够被大多数浏览器接受且符合W3C标准的颜色名称有16种，如表3.1所示。

表3.1 符合标准的颜色名称

（2）使用百分比，例如：

     color:rgb(100%,100%,100%);

在上面设置中，结果将显示为白色，其中第1个数字表示红色的比重值，第2个数字表示蓝色比重值，第3个数字表示绿色比重值，而rgb(0%,0%,0%)会显示为黑色，3个百分值相等将显示灰色。

（3）使用数字。数字范围从0到255，例如：

     color:rgb(255,255,255);

上面这个声明将显示为白色，而rgb(0,0,0)将显示为黑色。使用rgba()和hsla()颜色函数，可以设置4个参数，其中第4个参数表示颜色的不透明度，范围从0到1，其中1表示不透明，0表示完全透明。

使用十六进制数字来表示颜色（这是最常用的方法），例如：

     color:#ffffff;

其中要在十六进制数字前面加一个#颜色符号。上面这个定义将显示白色，而#000000将显示为黑色，用RGB来描述：

     color: #RRGGBB;

3.5.3 实战演练：定义粗体和斜体样式

粗体和斜体是字体的两种特殊艺术效果，在网页中起到强调文本的作用，以加深或提醒用户注意该文本所要传达信息的重要性。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中拖选段落文本“《雨霖铃》”。在【属性】面板中切换到【HTML】选项卡，然后单击【粗体】按钮，如图3.27所示。

图3.27 定义加粗字体效果

第3步，拖选段落文本“柳永”。在【属性】面板中单击【斜体】按钮，为该文本应用斜体效果，如图3.28所示。

图3.28 定义斜体字体效果

第4步，切换到【代码】视图下，使用HTML代码则显示如下：

     <p class="center"><strong>《雨霖铃》 </strong></p>
     <p class="center"><em>柳永</em></p>

【拓展】

在标准用法中，不建议使用<strong>和<em>标记定义粗体和斜体样式。提倡使用CSS样式代码进行定义。例如，针对上面示例，另存为test2.html，然后使用CSS设计相同效果，则文档完整代码如下：

3.5.4 实战演练：定义字体大小

字体大小可以使用CSS的font-size属性定义，在Dreamweaver中可以快速进行设置。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中拖选段落文本“《雨霖铃》”。在【属性】面板中切换到【CSS】选项卡，然后在【大小】下拉列表框中设置字体大小为24px，如图3.29所示。

图3.29 定义第1段文本字体大小

第3步，拖选段落文本“柳永”。在【属性】面板中设置字体大小为18px，如图3.30所示。

图3.30 定义第2段文本字体大小

第4步，切换到【代码】视图下，则自动生成的代码如下：

     <p class="center"><span style="font-size: 24px">《雨霖铃》 </span></p>
     <p class="center"><span style="font-size: 18px">柳永 </span></p>

第5步，保存文档，按F12键在浏览器中预览，则显示效果如图3.31所示。

图3.31 定义字体大小显示效果