4.1 美化字体样式
在HTML中，CSS字体属性用于定义文字的字体、大小、粗细的表现等。常见的字体属性包括字体、字号、字体风格、字体颜色等。
4.1.1 案例1——控制字体类型
font-family属性用于指定文字字体类型，例如宋体、黑体、隶书、Times New Roman等，即在网页中，展示字体不同的形状。具体的语法如下所示。
{font-family : name}
{font-family : cursive | fantasy | monospace | serif | sans-serif}
从语法格式可以看出，font-family有两种声明方式。第一种声明方式使用name字体名称，按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。在CSS3中，比较常用的是第一种声明方式。第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列。
【例4.1】（案例文件：ch04\4.1.html）
<!DOCTYPE html>
<html>
<style type=text/css>
p{font-family:黑体}
</style>
<body>
<p align=center>天行健，君子应自强不息。</p>
</body>
</html>
在IE 11.0浏览器中浏览效果如图4-1所示，可以看到文字居中并以黑体显示。
图4-1 字形显示
提示
在设计页面时，一定要考虑字体的显示问题，为了保证页面能达到预期的显示效果，最好提供多种字体类型，而且最好以最基本的字体类型作为最后一个。
其样式设置如下所示。
注意
当font-family属性值中的字体类型由多个字符串和空格组成时，如Times New Roman，那么，该值就需要使用双引号引起来。
4.1.2 案例2——定义字体大小
在CSS3新规定中，通常使用font-size设置文字大小。其语法格式如下所示。
{font-size : 数值| inherit | xx-small | x-small | small | medium | large |
x-large | xx-large | larger | smaller | length}
其中，可以通过数值来定义字体大小，例如用font-size:10px的方式定义字体大小为12像素。此外，还可以通过medium之类的参数定义字体的大小，其参数含义如表4-1所示。
表4-1 font-size参数列表
【例4.2】（案例文件：ch04\4.2.html）
在IE 11.0浏览器中浏览效果如图4-2所示，可以看到网页中文字被设置成不同的大小，其设置方式采用了绝对数值、关键字和百分比等形式。
图4-2 字体大小显示
在上面的例子中，font-size字体大小为50%时，其比较对象是上一级标签中的10pt。
同样，我们还可以使用inherit值，直接继承上级标记的字体大小。例如：
4.1.3 案例3——定义字体风格
font-style通常用来定义字体风格，即字体的显示样式。在CSS3新规定中，语法格式如下所示。
font-style : normal | italic | oblique |inherit
其属性值有四个，具体含义如表4-2所示。
表4-2 font-style参数表
【例4.3】（案例文件：ch04\4.3.html）
在IE 11.0浏览器中浏览效果如图4-3所示，可以看到文字分别显示不同的样式，例如斜体。
图4-3 字体风格显示
4.1.4 案例4——控制文字的粗细
通过CSS3中的font-weight属性可以定义字体的粗细程度，其语法格式如下所示。
{font-weight:100-900|bold|bolder|lighter|normal}
font-weight属性有13个有效值，分别是bold、bolder、lighter、normal、100~900。如果没有设置该属性，则使用其默认值normal。属性值设置为100~900，值越大，加粗的程度就越高。其具体含义如表4-3所示。
表4-3 font-weight属性表
浏览器默认的字体粗细是400，另外，也可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗。
【例4.4】（案例文件：ch04\4.4.html）
在IE 11.0浏览器中浏览效果如图4-4所示，可以看到文字显示出不同的加粗效果，其中使用了关键字加粗和数值加粗。
图4-4 字体粗细显示
4.1.5 案例5——将小写字母转为大写字母
font-variant属性设置大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用大写字体的字母与其余文本相比，其字体尺寸更小。在CSS3中，其语法格式如下所示。
font-variant : normal | small-caps |inherit
font-variant有三个属性值，分别是normal、small-caps和inherit。其具体含义如表4-4所示。
表4-4 font-variant属性表
【例4.5】（案例文件：ch04\4.5.html）
<!DOCTYPE html> <html> <body> <p style="font-variant:normal">Happy BirthDay to You</p> <p style="font-variant:small-caps">Happy BirthDay to You</p> </body> </html>
在IE 11.0浏览器中浏览效果如图4-5所示，可以看到字母以大写形式显示。
图4-5 字母大小写转换
通过对图4-5中两个属性值产生的效果进行比较可以看到，设置为normal属性值的文本以正常文本显示，而设置为small-caps属性值的文本中有稍大的大写字母，也有小的大写字母，也就是说，使用了small-caps属性值的段落文本全部变成了大写，只是大写字母的尺寸不同。
4.1.6 案例6——设置字体的复合属性
在设计网页时，为了使网页布局合理且文本规范，字体设计时需要使用多种属性，例如定义字体粗细，并定义字体大小。但是，多个属性分别书写相对比较麻烦，CSS3样式表提供的font属性就解决了这一问题。
font属性可以一次性地使用多个属性的属性值定义文本字体。其语法格式如下所示。
{font:font-style font-variant font-weight font-size font-family}
font属性中的属性排列顺序是font-style、font-variant、font-weight、font-size和font-family，各属性的属性值之间使用空格隔开，但是，如果font-family属性要定义多个属性值，则需使用逗号（,）隔开。
注意
属性排列中，font-style、font-variant和font-weight这三个属性值是可以自由调换的。而font-size和font-family则必须按照固定的顺序出现，而且还必须都出现在font属性中。如果这两者的顺序不对，或缺少一个，那么，整条样式规则可能会被忽略。
【例4.6】（案例文件：ch04\4.6.html）
在IE 11.0浏览器中浏览效果如图4-6所示，可以看到文字被设置成宋体并加粗。
图4-6 复合属性font显示
4.1.7 案例7——定义文字的颜色
在CSS3样式中，通常使用color属性来设置颜色。其属性值通常使用如表4-5所示的方式设定。
表4-5 color属性值
【例4.7】（案例文件：ch04\4.7.html）
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
p.hs{color:hsl(0,75%,50%)}
p.ha{color:hsla(120,50%,50%,1)}
p.ra{color:rgba(125,10,45,0.5)}
</style>
</head>
<body>
<h1>《青玉案 元夕》</h1>
<p>众里寻他千百度，蓦然回首，那人却在灯火阑珊处。
</p>
<p class="ex">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。(该段落定义了
class="ex"。该段落中的文本是蓝色的。)</p>
<p class="hs">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。(此处使用了CSS3中的新增加
的HSL函数，构建颜色。)</p>
<p class="ha">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。(此处使用了CSS3中的新增加
的HSLA函数，构建颜色。)</p>
<p class="ra">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。(此处使用了CSS3中的新增加
的RGBA函数，构建颜色。)</p>
</body>
</html>
在IE 11.0浏览器中浏览效果如图4-7所示，可以看到文字以不同颜色显示，并采用了不同的颜色取值方式。
图4-7 color属性显示