3.1 设计字体样式
字体样式包括字体类型、大小、颜色、粗细、下画线、斜体、大小写等。下面分别进行介绍。
3.1.1 定义字体类型
使用font-family属性可以定义字体类型，用法如下：
font-family: name
其中name表示字体名称，可以设置字体列表，多个字体按优先顺序排列，以逗号隔开。
如果字体名称包含空格，则应使用引号括起。第二种声明方式使用所列出的字体序列名称，如果使用fantasy序列，将提供默认字体序列。
【示例】启动Dreamweaver，新建一个网页，保存为test1.html，在<body>标签内输入两行段落文本：
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义网页字体的类型。
在浏览器中预览效果如图3.1所示。
图3.1 设计隶书字体效果
提示：在网页设计中，没有中文通用字体类型，中文字体的表现力比较弱，即使存在各种艺术字体，但是考虑到用户系统的支持率，很少被广泛使用。一般中文网页字体默认为宋体，对于标题或特殊提示信息，如果需要特殊字体，则建议采用图像形式间接实现。拉丁字体类型比较丰富，通用字体的选择余地大、艺术表现力强，在浏览外文网站时，用户会发现页面选用的字体类丰富很多。习惯上，标题都使用无衬线字体、艺术字体或手写体等，而网页正文则多使用衬线字体等。
【拓展】
如果读者想要更深入地了解网页字体类型的设计方法，请扫码阅读。
3.1.2 定义字体大小
使用CSS3的font-size属性可以定义字体大小，用法如下：
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length
其中xx-small（最小）、x-small（较小）、small（小）、medium（正常）、large（大）、x-large（较大）、xx-large（最大）表示绝对字体尺寸，这些特殊值将根据对象字体进行调整；larger（增大）和smaller（减少）这对特殊值能够根据父对象中字体尺寸进行相对增大或者缩小处理，使用成比例的em单位进行计算；length可以是百分数，或者是浮点数字和单位标识符组成的长度值，但不可为负值，其百分比取值基于父对象中字体的尺寸来计算，与em单位计算相同。
【示例】下面示例演示如何为网页定义字体大小。
启动Dreamweaver，新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后输入下面样式，分别设置网页字体默认大小、正文字体大小，以及栏目中字体大小。
【拓展】
如果读者想要更深入地了解网页字体大小的设计方法和各种单位的选择技巧，请扫码阅读。
3.1.3 定义字体颜色
使用CSS3的color属性可以定义字体颜色，用法如下：
color: color
参数color表示颜色值，取值包括颜色名、十六进制值、RGB等颜色函数，详细说明请参考CSS3参考手册，或者扫码了解更详细内容。
【示例】下面示例演示如何在文档中定义字体颜色。
启动Dreamweaver，新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后输入下面样式，分别定义页面、段落文本、<div>标签、<span>标签包含字体颜色。
3.1.4 定义字体粗细
使用CSS3的font-weight属性可以定义字体粗细，用法如下：
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
其中normal为默认值，表示正常的字体，相当于取值为400；bold表示粗体，相当于取值为700，或者使用<b >标签定义的字体效果；bolder（较粗）和lighter（较细）是相对于normal字体粗细而言；另外也可以设置值为100、200、300、400、500、600、700、800、900，它们分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，相反就表示越细。
【示例】定义字体粗细。
新建test.html文档，定义一个内部样式表，然后输入下面样式，分别定义段落文本、一级标题、<div>标签包含字体的粗细效果，同时定义一个粗体样式类。
注意：设置字体粗细也可以称为定义字体的重量。对于中文网页设计来说，一般仅用到bold（加粗）、normal（普通）两个属性值。
3.1.5 定义艺术字体
使用CSS3的font-style属性可以定义字体倾斜效果，用法如下：
font-style: normal | italic | oblique
其中normal为默认值，表示正常的字体；italic表示斜体；oblique表示倾斜的字体。italic和oblique两个取值只能在英文等西方文字中有效。
【示例】新建test.html文档，输入下面样式，定义一个斜体样式类。
在<body>标签中输入两段文本，并把斜体样式类应用到其中一段文本中。
最后在浏览器中预览，比较效果如图3.2所示。
图3.2 比较正常字体和斜体效果
3.1.6 定义修饰线
使用CSS3的text-decoration属性可以定义字体修饰线效果，用法如下：
text-decoration: none || underline || blink || overline || line-through
其中normal为默认值，表示无修饰线；underline表示下画线效果；blink表示闪烁效果；overline表示上画线效果；line-through表示贯穿线效果。
【示例】设置文字修饰线。
【操作步骤】
第1步，新建test.html文档，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第2步，输入下面样式，定义3个修饰字体样式类。
第3步，在<body>标签中输入3行段落文本，并分别应用上面的修饰类样式。
第4步，再定义一个样式，在该样式中，同时声明多个修饰值，定义的样式如下：
.line {text-decoration:line-through overline underline;}
第5步，在正文中输入一行段落文本，并把line样式类应该到该行文本中。
<p class="line">古今之成大事业、大学问者，必经过三种之境界。</p>
第6步，在浏览器中预览，多种修饰线比较效果如图3.3所示。
图3.3 多种修饰线的应用效果
提示：CSS3增强text-decoration功能，新增如下5个子属性。
text-decoration-line：设置修饰线的位置，取值包括none（无）、underline、overline、line-through、blink。
text-decoration-color：设置修饰线的颜色。
text-decoration-style：设置修饰线的形状，取值包括solid、double、dotted、dashed、wavy（波浪线）。
text-decoration-skip：设置文本修饰线条必须略过内容中的哪些部分。
text-underline-position：设置对象中下画线的位置。
关于这些子属性的详细取值说明和用法，请参考CSS3参考手册。由于目前大部分浏览器暂不支持这些子属性，可以暂时忽略。
3.1.7 定义字体的变体
使用CSS3的font-variant属性可以定义字体的变体效果，用法如下：
font-variant: normal | small-caps
其中normal为默认值，表示正常的字体；small-caps表示小型的大写字母字体。
【示例】新建test.html文档，在内部样式表中定义一个类样式。
然后在<body>标签中输入一行段落文本，并应用上面定义的类样式。
<p class="small-caps">font-variant </p>
注意：font-variant仅支持拉丁字体，中文字体没有大小写效果区分。如果设置了小型大写字体，但是该字体没有找到原始小型大写字体，则浏览器会模拟一个。例如，可通过使用一个常规字体，并将其小写字母替换为缩小过的大写字母。
3.1.8 定义大小写字体
使用CSS3的text-transform属性可以定义字体大小写效果。用法如下：
text-transform: none | capitalize | uppercase | lowercase
其中none为默认值，表示无转换发生；capitalize表示将每个单词的第一个字母转换成大写，其余无转换发生；uppercase表示把所有字母都转换成大写；lowercase表示把所有字母都转换成小写。
【示例】新建test.html文档，在内部样式表中定义3个类样式。
然后在<body>标签中输入3行段落文本，并分别应用上面定义的类样式。
分别在IE和Firefox浏览器中预览，则比较效果如图3.4和图3.5所示。
图3.4 IE中解析的大小效果
图3.5 Firefox中解析的大小效果
比较发现，IE认为只要是单词就把首字母转换为大写，而Firefox认为只有单词通过空格间隔之后，才能够成为独立意义上的单词，所以几个单词连在一起时就算作一个词。