16.8　字体实例—字体花样

字体在网页中的作用前面章节已介绍，在汉字中常用的字体有宋体、黑体等。其实网页中也可以设置字体，而且还可以设置字体的大小、颜色等，也可以设置行与行之间的行距和文字的间距等。

本实例分四步来讲解字体花样，通过CSS中的字体属性来表现出字体的丰富性，字体是复合属性，由一些与字体关联的属性组成，如字体大小、字体类型等，都可以设置字体的样式，下面通过实例来演示字体的用法。

先在网页中输入不同字体的名字，这些名字由不同的层组成，分成4个层，分别设置ID为font1、font2、font3和font4，在没有CSS的控制下，这些层中的文本字体还是原来的默认字体类型和字体大小，可以用CSS字体属性改变字体的样式，代码16.8显示了字体文本在没有CSS控制下的效果。

代码16.8　源代码\第16章\字体实例手把手—字体花样.html

———————————-文件名：字体实例手把手—字体花样.html———————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞字体实例手把手—字体花样＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！-布局DIV标记—＞

07 ＜divid="font1"＞

08 宋体

09 ＜/div＞

10 ＜divid="font2"＞

11 黑体

12 ＜/div＞

13 ＜divid="font3"＞

14 隶书

15 ＜/div＞

16 ＜divid="font4"＞

17 粗体

18 ＜/div＞

19 ＜/body＞

20 ＜/html＞

【代码解析】因只有HTML代码，没有用CSS控制，所定的层没起到修饰效果，所以显示的文本还是原始状态。而DIV中的层本来就是占一行的宽度，故在每个层中都表示单独的行，且其内对象为默认的字体类型和字体大小，分别表示“宋体”、“黑体”、“隶书”和“粗体”，效果如图16.8所示。

图　16.8　字体文本