1.3 唐诗三首——网页文本字体
1.3.1 编辑字体列表
掌握了文字的简单排版，并且了解到可通过CSS样式定义文字的颜色之后，下面将重点介绍CSS样式对文本的多个属性的定义。
如图1-20所示，新建网页文件并在Dreamweaver文档窗口中打开该文件。在网页中分别输入唐诗标题“绝句”以及唐诗内容，每输入一行均使用【Enter】键换行。
图1-20 输入网页文本
为了能表现了唐诗的“味”，可以从文本的字体上下功夫，例如选择一种字体，感觉也随之不同。在为文本设置样式前，必须先搞清楚需要定义几个样式，每个样式需要具体定义哪些属性。
下面将要为唐诗的标题定义为字号较大的粗体楷体的文本，而对于唐诗的内容则定义字号一般的正常楷体文本。所以，此时需要定义两个样式，并最终应用到唐诗标题和内容上。
01 如图1-21所示，打开【CSS样式】面板，单击【新建CSS规则】按钮。
02 弹出【新建CSS规则】对话框：
ⅰ.在【选择器类型】中选择“类（可应用于任何标签）”单选按钮。
ⅱ.在【名称】中输入“sbt”。
ⅲ.在【定义在】中选择“仅对该文档”单选按钮。
03 单击【确定】按钮进行该自定义样式的具体设置。
图1-21 新建CSS规则
04 弹出如图1-22所示的【.sbt的CSS规则定义】对话框，在其中设置文本的字体为“楷体”。可单击【字体】后的下拉箭头，在弹出的下拉列表框中进行选择。
05 若当前所有的字体列表没有“楷体”，可以可单击选择“编辑字体列表…”进行字体的定义添加。
06 弹出【编辑字体列表】对话框，在【可用字体】列表项中选一款楷体字“华文行楷”，单击【左移】按钮
到【选择的字体】列表框中。
02 继续选择【可用字体】列表框中的“宋体”并将其移入到【选择的字体】列表框中。
08 单击【确定】按钮完成字体的添加。
图1-22 【.sbt的CSS规则定义】对话框
01 如图1-23所示，进行“.sbt”的CSS规则定义，在【字体】下拉列表框中选择刚才定义的“‘华文行楷’，‘宋体’”选项。
图1-23 CSS规则定义
02 在【大小】下拉列表框中选择“36”、“像素（px）”选项。
03 在【粗细】下拉列表框中选择“粗体”选项。
04 在【样式】下拉列表框中选择“斜体”选项。
05 单击【确定】按钮完成为唐诗标题而定义的样式。
注：为什么在编辑添加新的字体列表时，在选择了“华文行楷”之后还添加了“宋体”？另外，在选择【字体】时其实显示为“‘华文行楷’，‘宋体’”，为什么？
首先就是为什么要多添加一种字体，CSS允许定义文本字体时有多种字体，但不是说最终字体是列出的这些字体的混合字体，而是当前计算机中所具备的第一个字体；再一个就是按照字体的先后顺序与当前计算机中存在的字体依次比较，如果当前计算机中具备该字体就显示为该字体，否则显示为当前计算机默认的字体。
所以，一般定义字体是选择大众化的绝大部分计算机都默认有安装的字体。如果非要使用一种很特殊很少见但又必须指定需要该字体效果的字体时，我们就会采用字体图像化在网页插入图像来处理了。
1.3.2 定义文本字体样式
01 如图1-24所示，打开【CSS样式】面板，单击【新建CSS规则】按钮。
02 弹出【新建CSS规则】对话框：
ⅰ.在【选择器类型】中选择“类（可应用于任何标签）”单选按钮。
ⅱ.在【名称】中输入“snr”。
ⅲ.在【定义在】中选择“仅对该文档”单选按钮。
03 单击【确定】按钮进行该自定义样式的具体设置。
图1-24 新建CSS规则
01 如图1-25所示，在【字体】的下拉列表框中选择“‘华文行楷’，‘宋体’”选项。
图1-25 CSS规则定义
02 在【大小】下拉列表框中选择“18”、“像素（px）”选项。
03 单击【确定】按钮完成CSS规则的定义。
1.3.3 应用文本字体样式
01 如图1-26所示，选择唐诗标题所在行的所有文本。
图1-26 应用CSS样式
02 打开【属性】面板，在【样式】下拉列表框中选择“sbt”选项。
03 继续选择唐诗内容的两段文本。
04 在【属性】面板的【样式】下拉列表框中选择样式“snr”。
05 按【Ctrl】+【S】组合键保存当前网页，按【F12】键打开浏览器浏览“唐诗三首”网页。如图1-27所示为CSS美化后的网页预览效果。
图1-27 文本应用了CSS样式的网页预览效果