16.3　字体大小

设置字体大小和设置颜色一样，都是对对象的文本设置的。字体大小用font-size表示，font和size中间是横线，而不是下划线。Font-size后面可接的参数值有：xx-small、x-small、small、medium、large、x-large、xx-large、larger、smaller、length，代表字体尺寸的值。

参数xx-small指绝对字体尺寸，是最小的；而x-small是较小，但比xx-small稍大点；而参数small是小的值；medium是默认值，是对象字体正常大小值；比medium大点的是参数large，绝对字体尺寸中大的值；同理，x-large是较大值；xx-large是最大的值。

要注意的是，参数larger是相对字体的尺寸，相对于父对象中字体尺寸相对增大，使用成比例的em单位计算，与之相对应的是smaller，相对于父对象中对字体尺寸相对减小，也是使用成比例的em单位计算。最后的length是百分数、浮点数字和单位标识符组成的长度。但不能为负值，百分比取值是基于父对象中字体的尺寸，下面用实例比较各个字体的大小，代码16.3演示了字体大小的用法。

代码16.3　源代码\第16章\字体大小.html

———————————————文件名：字体大小.html——————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞字体大小＜/title＞

04 ＜stylety="text/css"＞

05 #xxsmall

06 {

07 /设置字体大小为最小/

08 font-size：xx-small；

09 }

10 #xsmall

11 {

12 /设置字体大小为较小/

13 font-size：x-small；

14 }

15 #small

16 {

17 /设置字体为小型字体/

18 font-size：small；

19 }

20 #large

21 {

22 /设置字体为大型字体/

23 font-size：large；

24 }

25 #xlarge

26 {

27 font-size：x-large；

28 }

29 #xxlarge

30 {

31 font-size：xx-large；

32 }

33 ＜/style＞

34 ＜/head＞

35 ＜body＞

36 ＜p id="xxsmall"＞HTML+CSS完全自学手册

37 ＜p id="xsmall"＞HTML+CSS完全自学手册

38 ＜p id="small"＞HTML+CSS完全自学手册

39 ＜p id="large"＞HTML+CSS完全自学手册

40 ＜p id="xlarge"＞HTML+CSS完全自学手册

41 ＜p id="xxlarge"＞HTML+CSS完全自学手册

42 ＜/body＞

43 ＜/html＞

【代码解析】在代码16.3中，分别用绝对字体尺寸表示6种不同的字体，第1个段落设置了文本对象为最小（代码第36行）；第2个段落设置的文本字体为较小（代码第37行）；第3个段落设置对象字体为小型字体（代码第38行）；而在第4个段落中，设置字体为大型字体（代码第39行）；在第5个段落中，设置字体为超大型字体（代码第40行）；最后在第6个段落中，设置字体为最大（代码第41行），效果如图16.3所示。

图　16.3　绝对字体大小

字体大小除了上面的绝对字体尺寸、相对字体尺寸外还有用length表示的，可以写上具体的大小值，如下代码用不同大小单位表示。

/设置不同单位的字体/

font-size：12px；

font-size：12pt；

font-size：9；

上面三种表示不同的单位值，所表示的字体大小也不一样，所以读者设置字体大小时，在确定数值时，还要确定其单位是否需要设置。