CSS字体样式属性有哪些内容?
美食专栏节目如图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字体样式属性的内容了,下期我们讲文本外观属性。