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所示。