7.1 字体属性

一个杂乱无序、堆砌而成的网页会使人产生枯燥无味、望而止步的感觉，而一个美观大方的网页会让人有美轮美奂、流连忘返的感觉。这美观大方的效果，都是使用CSS字体样式来设置的。通过对本节内容的学习，相信读者可以设计出令人流连忘返的网页。

7.1.1 字体font-family

font-family属性用于指定文字字体类型，例如宋体、黑体、隶书、Times New Roman等，即在网页中展示字体不同的形状，具体的语法格式如下所示。

     {font-family:name}
     {font-family:cursive|fantasy|monospace|serif|sans-serif}

从语法格式上可以看出，font-family有两种声明方式。第一种方式，使用name字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，就应使用引号括起；第二种声明方式使用所列出的字体序列名称，如果使用fantasy序列，将提供默认字体序列。在CSS3中，比较常用的是第一种声明方式。


【例7.1】（实例文件：ch07\7.1.html）

     <!DOCTYPE html>
     <html>
     <head>
     <style type=text/css>
     p{font-family:黑体}
     </style>
     </head>
     <body>
     <p align=center>天行健，君子以自强不息。</p>
     </body>
     </html>

在IE 11.0中的浏览效果如图7-1所示，文字居中并以黑体显示。

图7-1 字型显示

在字体显示时，如果指定一种特殊字体类型，而在浏览器或者操作系统中该类型不能正确获取，可以通过font-family预设多种字体类型。font-family属性可以预置多个供页面使用的字体类型，即字体类型序列，其中每种字型之间使用逗号隔开。如果前面的字体类型不能够正确显示，则系统将自动选择后一种字体类型，以此类推。

所以，在设计页面时，一定要考虑字体的显示问题，为了保证页面达到预计的效果，最好提供多种字体类型，而且最好以最基本的字体类型作为最后一个，其样式设置如下所示。

     P{
     font-family:华文彩云,黑体,宋体
     }

当font-family属性值中的字体类型由多个字符串和空格组成时（例如Times New Roman），该值就需要使用双引号引起来。

7.1.2 字号font-size

一个网页中，标题通常使用较大字体显示，用于吸引人注意，小字体用来显示正常内容。大小字体结合形成的网页既能吸引人的眼球，又可提高阅读效率。

在CSS3新规定中，通常使用font-size设置文字大小，其语法格式如下所示。

         {font-size:数值
     |inherit|xx-small|x-small|small|medium|large|x-large|xx-large|larger|
     smaller|length}

其中，通过数值来定义字体大小，例如用font-size:10px的方式定义字体大小为10px。此外，还可以通过其他属性值定义字体的大小，各属性值含义如表7-1所示。

表7-1 字号属性值

【例7.2】（实例文件：ch07\7.2.html）

在IE 11.0中的浏览效果如图7-2所示。网页中的文字被设置成了不同的大小，其设置方式采用了绝对数值、关键字和百分比等形式。

图7-2 字体大小显示

在上面的例子中，font-size字体大小为50%时，其比较对象是上一级标签中的10pt。同样还可以使用inherit值，直接继承上级标记的字体大小，代码如下：

     <div style="font-size:50pt">上级标记
     <p style="font-size: inherit ">继承</p>
     </div>

7.1.3 字体风格font-style

font-style通常用来定义字体风格，即字体的显示样式。在CSS3新规定中，语法格式如下所示。其属性值有4个，具体含义如表7-2所示。

表7-2 字体风格属性值

     font-style:normal|italic|oblique|inherit

【例7.3】（实例文件：ch07\7.3.html）

     <!DOCTYPE html>
     <html>
     <body>
     <p style="font-style:italic">梅花香自苦寒来</p>
     <p style="font-style:normal">梅花香自苦寒来</p>
     <p style="font-style:oblique">梅花香自苦寒来</p>
     </body>
     </html>

在IE 11.0中的浏览效果如图7-3所示，分别显示了不同的文字样式。

图7-3 字体风格显示

7.1.4 加粗字体font-weight

通过设置字体粗细，可以让文字显示不同的外观。通过CSS3中的font-weight属性可以定义字体的粗细程度，其语法格式如下所示。

     {font-weight:100-900|bold|bolder|lighter|normal;}

font-weight的属性值分别是bold、bolder、lighter、normal、100~900。如果没有设置该属性，则使用其默认值normal。属性值设置为100~900，值越大，加粗的程度就越高。其具体含义如表7-3所示。

表7-3 加粗字体属性值

浏览器默认的字体粗细是400，另外也可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗。


【例7.4】（实例文件：ch07\7.4.html）

     <!DOCTYPE html>
     <html>
     <body>
     <p style="font-weight:bold">学习雷锋好榜样(bold)</p>
     <p style="font-weight:bolder">学习雷锋好榜样(bolder)</p>
     <p style="font-weight:lighter">学习雷锋好榜样(lighter)</p>
     <p style="font-weight:normal">学习雷锋好榜样(normal)</p>
     <p style="font-weight:100">学习雷锋好榜样(100)</p>
     <p style="font-weight:400">学习雷锋好榜样(400)</p>
     <p style="font-weight:900">学习雷锋好榜样(900)</p>
     </body>
     </html>

在IE 11.0中的浏览效果如图7-4所示。文字以不同方式加粗，其中使用了关键字加粗和数值加粗。

图7-4 字体粗细显示

7.1.5 小写字母转为大写字母font-variant

font-variant属性设置大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写。在CSS3中，其语法格式如下所示。

     {font-variant:normal|small-caps|inherit}

font-variant有3个属性值，分别是normal、small-caps和inherit。其具体含义如表7-4所示。

表7-4 各属性值含义

【例7.5】（实例文件：ch07\7.5.html）

     <!DOCTYPE html>
     <html>
     <body>
     <p style="font-variant:normal">Happy BirthDay to You</p>
     <p style="font-variant:small-caps">Happy BirthDay to You</p>
     </body>
     </html>

在IE 11.0中的浏览效果如图7-5所示，可以看到字母以大写形式显示。

图7-5 字母大小写转换

通过对两个属性值产生的效果进行比较可以看到，设置为normal属性值的文本以正常文本显示，而设置为small-caps属性值的文本中既有稍大的大写字母也有小的大写字母，也就是说，使用了small-caps属性值的段落文本全部变成了大写，只是大写字母的尺寸不同。

7.1.6 字体复合属性font

在设计网页时，为了使网页布局合理且文本规范，对字体设计需要使用多种属性，例如定义字体粗细、定义字体大小等。但是多个属性分别书写相对比较麻烦，CSS3样式表提供的font属性就解决了这一问题。

font属性可以一次性使用多个属性的属性值定义文本字体，其语法格式如下所示。

     {font:font-style font-variant font-weight font-size font-family}

font属性中的属性排列顺序是font-style、font-variant、font-weight、font-size和font-family，各属性的属性值之间使用空格隔开，但是如果font-family属性要定义多个属性值，就需使用逗号“，”隔开。

在属性排列中，font-style、font-variant和font-weight这三个属性值是可以自由调换的；而font-size和font-family则必须按照固定的顺序出现，如果这两个属性的顺序不对或缺少一个，那么整条样式规则可能会被忽略。


【例7.6】（实例文件：ch07\7.6.html）

在IE 11.0中的浏览效果如图7-6所示，文字被设置成宋体并加粗。

图7-6 复合属性font显示

7.1.7 字体颜色color

没有色彩的网页是枯燥而没有生机的，这就意味着一个优秀的网页设计者不仅要能够合理安排页面布局，还要具有一定的色彩视觉和色彩搭配能力，这样才能够使网页更加精美、具有表现力，给浏览者以亲切感。

在CSS3样式中，通常使用color属性来定义颜色。其属性值通常使用的设定方式如表7-5所示。

表7-5 属性值设定域

【例7.7】（实例文件：ch07\7.7.html）

在IE 11.0中的浏览效果如图7-7所示，其中文字以不同颜色显示，并采用了不同的颜色取值方式。

图7-7 color属性显示

技巧提示

在本实例中，使用了3个CSS3中新增加的表现形式，分别是HSL（）、HSLA（）和RGBA（）。这3个函数在Firefox中支持，但IE浏览器尚不支持。

上一章目录下一章