CSS字体样式属性有哪些内容？

CSS字体样式属性有哪些内容？

美食专栏节目如图1

图1

知识引入（1）

1. CSS字体样式属性

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

(1)font-size:字号大小

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

表3-1  font-size可用的单位长度

长度单位	说明
em	倍率，相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
in	英寸
cm	厘米
mm	毫米
pt	点

*注意：表中，相对长度单位比较常用，这里推荐的是使用像素单位px,绝对单位是用的比较少。例如将网页中所有的文本都设置为12px的大小，可以使用CSS代码：p{font-size:12px;}

(2)font-family:字体

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

可以同时指定多个字体，中间用逗号隔开，如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，例如：p{font-family:”华文彩云”,”宋体”,”黑体”;}

当应用上述代码时，如果浏览器没有华文彩云字体，则会选择宋体，没有宋体就选黑体，如果都没有，浏览器就会选择默认字体。

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

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

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

p{font-family:Arial,”微软雅黑”,”宋体”,”黑体”;}     /*正确的书法方式*/

p{font-family:”微软雅黑”,”宋体”,”黑体”,Arial;}     /*错误的书法方式*/

*3 如果字体中包含空格、#、&等符号，则该字体必须加英文状态下的单引号或者双引号，例如：p{font-family:”Times  New Roman”；}

*4 如果没有特别要求，尽量使用系统默认字体，从而保证在任何用户的浏览器中都能正确显示。

（3）font-weight:字体粗细

font-weight用于定义字体粗细，它的属性值如表3-2显示。

表3-2   font-weight可用属性值

值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900(100的整数倍)	定义由细到粗的字符，其中400等同于normal,700等同于bold,值越大字体越粗

*注意：实际工作中，font-weight常用属性是normal和bold，用来定义正常或者加粗的字体。

（4）font-style:字体风格

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

*1 normal:默认值，浏览器会显示标准的字体样式。

*2 italic:浏览器会显示斜体的字体样式。

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

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

（5）font:综合设置字体样式

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

选择器{font-family:”微软黑体”;

font-size:12px;

font-style:italic;

font-weight:bold;

}

以上代码等价于选择器{font:italic  bold  12px  “微软雅黑”;}，整体代码如图2

图2

保存后显示效果如图3

图三

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

（6）@font-face规则

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

@font-face{

font-family:字体名称；

src:字体路径;

}

*注意：font-family用于指定该服务器字体动名称，该名称可以随意定义；src属性用于指定该字体文件的路径。

下面通过一个案例来演示一下@font-face规则的具体用法。先写代码，如图4

图4

总结：1.下载字体并储存到相应的文件夹中。2.使用@font-face规则定义服务器字体。3.对元素应用”font-family”字体样式。

（7）以上就是CSS字体样式属性的内容了，下期我们讲文本外观属性。