5.1 设置网页文本字体

在HTML 5中，可以使用CSS 3字体属性来定义文字的大小、字体、粗细等表现。常见的字体属性包括字体、字号、字体颜色、字体风格等。

5.1.1 设置字体粗细属性

font-weight属性用于定义字体的粗细程度。font-weight属性有13个有效值，分别是bold、bolder、lighter、normal、100～900。如果没有设置该属性，则使用其默认值normal。属性值设置为100～900，值越大，加粗的程度就越大。

font-weight属性值的具体含义如表5-1所示。

【例5-1】（实例文件：ch05\Chap5.1.html）设置字体粗细。

相关的代码实例请参考Chap5.1.html文件，在IE浏览器中运行的结果如图5-1所示。

5.1.2 设置字体风格属性

font-style属性用于设置字体的风格，即字体的显示样式。font-style属性值有4个，具体含义如表5-2所示。

【例5-2】（实例文件：ch05\Chap5.2.html）设置字体风格。

相关的代码实例请参考Chap5.2.html文件，在IE浏览器中运行的结果如图5-2所示。

5.1.3 设置字体大小属性

font-size属性用于设置字体的大小。可以给font-size属性指定具体的像素值，如“font-size：20px”，还可以通过一些参数来设置字体的大小，这些参数和说明如表5-3所示。

【例5-3】（实例文件：ch05\Chap5.3.html）设置字体大小。

相关的代码实例请参考Chap5.3.html文件，在IE浏览器中运行的结果如图5-3所示。

5.1.4 设置字体类型属性

font-family属性用于指定文字的字体类型，如隶书、宋体、黑体、楷体等。

【例5-4】（实例文件：ch05\Chap5.4.html）设置字体类型。

相关的代码实例请参考Chap5.4.html文件，在IE浏览器中运行的结果如图5-4所示。

5.1.5 设置文本行高属性

line-height属性用于设置行间距，即行高。它的取值可以是百分比数值、浮点数和单位标识符组成的长度值，允许为负值，百分比取值是基于字体的高度尺寸。

【例5-5】（实例文件：ch05\Chap5.5.html）设置文本的行高。

相关的代码实例请参考Chap5.5.html文件，在IE浏览器中运行的结果如图5-5所示。

5.1.6 设置字体复合属性

在网页设计中，对字体需要设置多种属性值时，多个属性值分别书写相对比较麻烦，可以使用font属性解决这一问题。font属性中的属性值的排列顺序是font-style、font-variant、font-weight、font-size和font-family，各属性的属性值之间使用空格隔开。Family属性要定义多个属性值时，需要用逗号把每个属性值隔开。

其中font-style、font-variant和font-weight这三个属性的顺序可以自由调换，甚至可以不写，font-size和font-family属性必须固定顺序出现，而且必须都出现在font属性中。

【例5-6】（实例文件：ch05\Chap5.6.html）设置字体的复合属性。

相关的代码实例请参考Chap5.6.html文件，在IE浏览器中运行的结果如图5-6所示。

5.1.7 定义网页文本颜色属性

对于网页中的文本颜色，使用color属性来设置，color属性的取值如表5-4所示。

【例5-7】（实例文件：ch05\Chap5.7.html）设置网页文本颜色。

相关的代码实例请参考Chap5.7.html文件，在IE浏览器中运行的结果如图5-7所示。