1.5.2 设置页面字体格式
使用CSS可以设置字体的名称、大小、风格等样式。
1.字体名称属性：font-family
用这个属性设定字体的名称，如Arial、Courier等。示例代码1-19演示了如何使用该属性。
代码1-19 CSS字体名称属性：font-family 1-19.html
18 ＜html＞
19 ＜head＞
20 ＜title＞字体名称属性font-family＜/title＞
21 ＜STYLE＞
22 .s1{font-family：Arial}
23 .s2{font-family：Courier}
24 .s3{font-family：Verdana}
25 ＜/STYLE＞
26 ＜/head＞
27 ＜body＞
28 ＜p class="s1"＞This text's fon-family value is"Arial"＜/p＞
29 ＜p class="s2"＞This text's fon-family value is"Courer"＜/p＞
30 ＜p class="s3"＞This text's fon-family value is"Verdana"＜/p＞
31 ＜/body＞
32 ＜/html＞
【代码解析】第21行先使用＜STYLE＞标签定义样式，然后在第22～24行定义了3个字体样式。
显示效果如图1-22所示。
2.字体大小属性：font-size
font-size属性用来设定字体的大小，字体大小的单位有多种，常见的是pt和px。示例代码1-20演示了如何使用该属性。
代码1-20 CSS字体大小属性：font-size 1-20.html
01 ＜html＞
02 ＜head＞
03 ＜title＞字体大小属性font-size＜/title＞
04 ＜STYLE＞
05 body{font-size：10pt}
06 .s1{font-size：16px}
07 .s2{font-size：16pt}
08 ＜/STYLE＞
09 ＜/head＞
10 ＜body＞
11 ＜p＞此段文字的大小为10pt。＜/p＞
12 ＜p class="s1"＞此段文字的大小是16px＜/p＞
13 ＜p class="s2"＞此段文字的大小是16pt＜/p＞
14 ＜/body＞
15 ＜/html＞
【代码解析】第5～7行定义了3种字体大小，其中第5行定义的是页面body内的字体大小。也就是说，只要在页面的＜body＞＜/body＞标签内，没指明特殊字体大小时，都应用这里设计好的字体大小。
显示效果如图1-23所示。
3.字体风格属性：font-style
font-style属性有3个值可选：normal（正常显示）、italic（斜体字）、oblique（斜体显示）。normal是默认值。示例代码1-21演示了如何使用该属性。
代码1-21 CSS字体风格属性：font-style 1-21.html
01 ＜html＞
02 ＜head＞
03 ＜title＞字体风格属性font-style＜/title＞
04 ＜STYLE＞
05 .s1{font-style：italic}
06 .s2{font-style：oblique}
07 ＜/STYLE＞
08 ＜/head＞
09 ＜body＞
10 ＜p＞此文字风格是normal＜/p＞
11 ＜p class="s1"＞此段文字的字体风格属性值是italic＜/p＞
12 ＜p class="s2"＞此段文字的字体风格属性值是oblique＜/p＞
13 ＜/body＞
14 ＜/html＞
【代码解析】第5～6行定义了字体的斜体样式。其中italic和oblique都是向右倾斜的文字，但区别在于italic是指斜体字，而oblique是倾斜的文字，对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果。
显示效果如图1-24所示。
