16.4　字体重量

字体重量也就是字体粗细，其语法用font-weight表示，作用由用户端系统安装的字体的特定字体变量映射来决定，系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。

字重font-weight有多个参数可选择，除字母表示不同的字重外，还可以用数字表示，数字越大，字体越粗，但数值也是有限的选择，下面是表示字体重量（font-weight）的完整语法形式。

font-weight：normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

参数normal表示正常大的字体，相当于用数字400表示，而bold是粗体格式，相当于700，或者用＜b＞＜/b＞标记对表示的字体重量。

Bolder和lighter表示不是一个具体值，前者比正常值要粗，而后者比正常值要细，数字从100到900，字体粗细程度由细到粗，代码16.4表示字体重量。

代码16.4　源代码\第16章\字体重量.html

——————————————-文件名：字体重量.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞字体重量＜/title＞

04 ＜stylety="text/css"＞

05 #bold

06 {

07 /以下是设置字体重量/

08 font-weight：bold；

09 }

10 #bolder

11 {

12 /设置为粗体/

13 font-weight：bolder；

14 }

15 #lighter

16 {

17 /设置字体重量，字体表现得比较细/

18 font-weight：lighter；

19 }

20 #num100

21 {

22 font-weight：100；

23 }

24 #num300

25 {

26 font-weight：300；

27 }

28 #num500

29 {

30 font-weight：500；

31 }

32 #num700

33 {

34 font-weight：700；

35 }

36 #num900

37 {

38 font-weight：900；

39 }

40 ＜/style＞

41 ＜/head＞

42 ＜body＞

43 ＜p＞HTML+CSS完全自学手册—正常

44 ＜p id="bold"＞HTML+CSS完全自学手册—bold

45 ＜p id="bolder"＞HTML+CSS完全自学手册—bolder

46 ＜p id="lighter"＞HTML+CSS完全自学手册—lighter

47 ＜p id="num100"＞HTML+CSS完全自学手册—100

48 ＜p id="num300"＞HTML+CSS完全自学手册—300

49 ＜p id="num500"＞HTML+CSS完全自学手册—500

50 ＜p id="num700"＞HTML+CSS完全自学手册—700

51 ＜p id="num900"＞HTML+CSS完全自学手册—900

52 ＜/body＞

53 ＜/html＞

【代码解析】代码16.4比较了字体重量的不同参数，在多个段落中，设置不同的字体重量，用bold等关键字和100～900中的数字都可以表示字体重量（代码第44～51行），在网页中不同的字体重量表示出不同的文本粗细，效果如图16.4所示。

图　16.4　字体重量

注意　字体的粗细可以由bold和lighter决定，也可以由数字100～900表示。