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字体样式属性的内容了,下期我们讲文本外观属性。