2.5 定义字体样式
文本包含很多属性，通过设置这些属性，用户可以控制网页效果。一个网页的设计效果是否精致，很大程度上取决于文本样式设计。
2.5.1 实战演练：设置字体类型
视频讲解
在网页中，中文字体默认显示为宋体，如果选择【修改】|【管理字体】命令，可以打开【管理字体】对话框，重设字体类型。
【操作步骤】
第1步，启动Dreamweaver CC，打开2.4节创建的网页文档test.html，另存为test1.html。
第2步，在编辑窗口中拖选文本“《雨霖铃》”。
第3步，选择【修改】|【管理字体】命令，打开【管理字体】对话框，切换到【自定义字体堆栈】选项卡。在【可用字体】列表中选择一种本地系统中可用的字体类型，如“隶书”。
第4步，单击添加按钮
，把选择的可用字体添加到【选择的字体】列表中，如图2.21所示。
图2.21 添加可用字体
提示：在【管理字体】对话框中可以设置多种字体类型，如自定义字体类型，或者选择本地系统可用字体，只要用户计算机安装的字体，都可以进行选择设置。不过建议用户应该为网页字体设置常用字体类型，以确保大部分浏览者都能够正确浏览。
第5步，在属性面板中，切换到CSS选项卡，在【字体】列表框中单击右侧向下箭头，从弹出的列表中可以看到新添加的字体，选择添加的字体“隶书”，即可为当前标题应用隶书字体效果，如图2.22所示。
图2.22 应用字体类型样式
第6步，切换到【代码】视图，可以看到Dreamweaver使用CSS定义的字体样式属性。
<p class="red center"><span style="font-family: '隶书'">《雨霖铃》 </span></p>
<p class="red center">柳永</p>
提示：在传统布局中，默认使用<font>标记设置字体类型、字体大小和颜色，在标准设计中就不再建议使用。
2.5.2 实战演练：设置字体颜色
视频讲解
选择【格式】|【颜色】命令，打开【颜色】面板，利用该面板可以为字体设置颜色。
【操作步骤】
第1步，启动Dreamweaver CC，打开2.5.1节的网页文档test1.html，另存为test2.html。
第2步，在编辑窗口中拖选段落文本“《雨霖铃》”。在属性面板中设置字体格式为“标题1”。
第3步，拖选段落文本“柳永”。在属性面板中设置字体格式为“标题2”。同时修改“柳永”的应用类样式为center，而不是复合类样式，清除红色字体效果，仅让二级标题居中显示，如图2.23所示。
图2.23 修改标题文本格式化和类样式
第4步，拖选词正文的第一段文本，在属性面板中切换到CSS选项卡，单击“颜色”小方块，从弹出的颜色面板中选择一种颜色，这里设置颜色为浅绿色，RGBa值显示为rgba（60，255，60，1），如图2.24所示。
图2.24 定义第一段文本颜色
第5步，拖选第2段文本，设置字体颜色为rgba（60，255，60，0.9），用户也可以直接在属性面板的颜色文本框中输入“rgba（60，255，60，0.9）”，如图2.25所示。
图2.25 定义第二段文本颜色
第6步，以同样的方式执行如下操作：
（1）设置第3段文本字体颜色为rgba（60，255，60，0.8）。
（2）设置第4段文本字体颜色为rgba（60，255，60，0.7）。
（3）设置第5段文本字体颜色为rgba（60，255，60，0.6）。
（4）设置第6段文本字体颜色为rgba（60，255，60，0.5）。
（5）设置第7段文本字体颜色为rgba（60，255，60，0.4）。
（6）设置第8段文本字体颜色为rgba（60，255，60，0.3）。
第7步，选中标题1文本“《雨霖铃》”，在属性面板中修改字体颜色为green。
第8步，保存文档，按F12快捷键，在浏览器中预览，显示效果如图2.26所示。
图2.26 定义字体颜色效果
【拓展】
在网页中表示颜色有3种方法：颜色名、百分比和数值。
☑ 使用颜色名是最简单的方法。
☑ 使用百分比，例如：
color:rgb (100%，100%，100%);
在上面这个声明将显示为白色，其中第1个数字表示红色的比重值，第2个数字表示蓝色比重值，第3个数字表示绿色比重值，而rgb（0%，0%，0%）会显示为黑色，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;
2.5.3 实战演练：设置艺术字体
视频讲解
粗体和斜体是字体的两种特殊艺术效果，在网页中起到强调文本的作用，以加深或提醒用户注意该文本所要传达信息的重要性。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，在编辑窗口中拖选段落文本“《雨霖铃》”。在属性面板中切换到HTML选项卡，然后单击【粗体】按钮，如图2.27所示。
图2.27 定义加粗字体效果
第3步，拖选段落文本“柳永”。在属性面板中单击【斜体】按钮，为该文本应用斜体效果，如图2.28所示。
图2.28 定义斜体字体效果
第4步，切换到【代码】视图下，可以看到生成如下的HTML代码：
<p class="center"><strong>《雨霖铃》 </strong></p>
<p class="center"><em>柳永</em></p>
【拓展】
在标准用法中，不建议使用<strong>和<em>标记定义粗体和斜体样式。提倡使用CSS样式代码进行定义。例如，针对上面的示例，另存为test2.html，然后使用CSS设计相同的效果，文档完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.center { text-align: center; }
.red { color: #FF0000; }
.bold{ font-weight:bold;}
.ital {font-style:italic;}
</style>
</head>
<body>
<p class="center bold">《雨霖铃》</p>
<p class="center ital">柳永</p>
<p> 寒蝉凄切，对长亭晚，骤雨初歇。</p>
<p>都门帐饮无绪，留恋处、兰舟催发。</p>
<p>执手相看泪眼，竟无语凝噎。念去去、千里烟波，暮霭沉沉楚天阔。</p>
<p>多情自古伤离别，更那堪，冷落清秋节！</p>
<p>今宵酒醒何处？</p>
<p>杨柳岸、晓风残月。</p>
<p>此去经年，应是良辰好景虚设。</p>
<p>便纵有千种风情，更与何人说？ </p>
</body>
</html>
2.5.4 实战演练：设置字体大小
视频讲解
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，在编辑窗口中拖选段落文本“《雨霖铃》”。在属性面板中切换到CSS选项卡，然后单击【大小】下拉列表右侧的向下按钮，打开字体下拉列表，选择一个选项即可，这里设置字体大小为24px，如图2.29所示。
图2.29 定义第1段文本字体大小
提示：也可以直接输入数字，在后面的单位文本框显示为可用状态，从中选择一个单位即可。其中，默认选项【无】是指Dreamweaver CC默认字体大小或者继承上级包含框定义的字体，用户可以选择【无】选项来恢复默认字体大小。
第3步，拖选段落文本“柳永”。在属性面板中设置字体大小为18px，如图2.30所示。
图2.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键在浏览器中预览，显示效果如图2.31所示。
图2.31 定义字体大小显示效果
提示：网页默认字体大小为16像素，实际设计中网页正文字体大小一般为12像素，这个大小符合大多数浏览者的阅读习惯，又能最大容量地显示信息。