CSS字体样式属性

为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性，具体如下。

1. font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如表1所示。

表1 CSS长度单位

其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。例如将网页中所有段落文本的字号大小设为12px，可以使用如下CSS样式代码：

p{font-size:12px;}

2. font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用以下CSS样式代码：

p{font-family:"微软雅黑";}

可以同时指定多个字体，中间用逗号隔开，如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，例如下面的代码：

body{font-family:"华文彩云","宋体","黑体";}

当应用上面的字体样式时，系统会首选“华文彩云”，如果用户电脑上没有安装该字体则选择“宋体”，如果没有安装“宋体”则选择“黑体”。当指定的字体都没有安装时，就会使用浏览器默认字体。

使用font-family设置字体时，需要注意以下几点：

● 各种字体之间必须使用英文状态下的逗号隔开。

●中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名称必须位于中文字体名称之前，例如下面的代码：

body{font-family: Arial,"微软雅黑","宋体","黑体";}  /*正确的书写方式*/
body{font-family: "微软雅黑","宋体","黑体",Arial;}  /*错误的书写方式*/

●如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

●尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3. font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值如表2所示。

表2 font-weight可用属性值

实际工作中，常用的font-weight的属性值为normal和bold，用来定义正常或加粗显示的字体。

4. font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下。

● normal：默认值，浏览器会显示标准的字体样式。

●italic：浏览器会显示斜体的字体样式。

● oblique：浏览器会显示倾斜的字体样式。

其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但italic是使用了文字本身的斜体属性，oblique是让没有斜体属性的文字做倾斜处理。实际工作中常使用italic。

5. font:综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下。

选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高。例如：

p{
font-family:Arial,"宋体"; 
font-size:30px; 
font-style:italic; 
font-weight:bold; 
font-variant:small-caps; 
line-height:40px;
}

等价于

p{font:italic small-caps bold 30px/40px Arial,"宋体";}

其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

font属性设置的样式并没有对第二个段落文本生效，这是因为对第二个段落文本的设置中省略了字体属性font-family。

6. @font-face规则

@font-face是CSS3的新增规则，用于定义服务器字体。通过@font-face规则，网页设计师可以在用户计算机未安装字体时，使用任何喜欢的字体。使用@font-face规则定义服务器字体的基本语法格式如下。

    @font-face{
​        font-family:字体名称;
​        src:字体路径;
​    }

在上面的语法格式中，font-family用于指定该服务器字体的名称，该名称可以随意定义；src属性用于指定该字体文件的路径。

当定义并设置服务器字体后，页面就可以正常显示剪纸字体。需要注意的是，服务器字体定义完成后，还需要对元素应用“font-family”字体样式。

使用服务器字体的步骤。

（1） 下载字体，并存储到相应的文件夹中。

（2） 使用@font-face规则定义服务器字体。

对元素应用“font-family”字体样式。