1.font-size:字号大小
font-size 属性用于设置字号,该属性的值可以使用想相对长度单位,也可以使用绝对长度单位。
相对长度单位 | 说明 |
em | 相当于当前对象内文本的字体尺寸 |
px | 像素,最常用,推荐使用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
其中,相对长度单位比较常用,推荐使用像素单位 px,绝对长度单位使用较少。
2.font-family:字体
font-family 属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。如将网页中所有段落文本的字体设置为微软雅黑:
可以同时指定多个字体,中间用逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体:
使用 font-family 设置字体时,需要注意一下几点:
* 各种字体之间必须使用英文状态下的逗号隔开
* 中文字体需要加英文状态下的引号,英文字体字体一般不需要引号。当设置英文字体时,英文字体名必须位于中文字体名之前:
* 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号:
* 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
3.font-weight:字体粗细
font-weight可用属性值
值 | 描述 |
normal | 默认值。定义标准的字符 |
bold | 定义粗体字符 |
bolder | 定义更粗的字符 |
lighter | 定义更细的字符 |
100 ~ 900(100的整数倍) | 定义由细到粗的字符。其中 400 等同于 normal,700 等同于 bold,值越大字体越粗 |
实际中,常用的 font-weight 的属性值为 normal 和 bold,用来定义正常或加粗显示的字体。
4.font-style:字体风格
font-style 属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
* normal:默认值,浏览器会显示斜体的字体样式
* italic:浏览器会显示斜体的字体样式
* oblique:浏览器会显示倾斜的字体样式
其中 italic 和 oblique 都用于定义斜体,两者在现实效果上并没有本质区别,但实际中常使用 italic。
5.font:综合设置字体样式
font 属性用于对字体样式进行综合设置,其基本语法格式为:
选择器{font: font-style font-weight font-size/line-height font-family;}
使用 font 属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。其中 line-height 指的是行高:
等价于
其中不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用。
6.@font-face属性
@font-face 属性是 CSS3 的新增属性,用于定义服务器字体。通过 @font-face 属性,开发者可以在用户计算机未安装字体时,使用任何喜欢的字体。使用 @font-face 属性定义服务器字体的基本语法格式如下:
@font-face {
font-family: 字体名称;
src: 字体路径;
}
其中,font-family 用于指定该服务器字体的名称,该名称可以随意定义,src 属性用于指定该字体文件的路径。
使用服务器字体的步骤:
(1)下载字体,并存储到相应的文件夹中
(2)使用 @font-face 属性定义服务器字体
(3)对元素应用 “font-family” 字体样式
7.word-wrap属性
word-wrap属性用于实现长单词和 URL 地址的自动换行,其基本语法格式:
选择器{word-wrap: 属性值;}
word-wrap属性值
值 | 描述 |
normal | 只在允许的断字点换行(浏览器保持默认处理) |
break-word | 在长单位或 URL 地址内部进行换行 |
由图可看出,当浏览器默认处理时段落文本中的 URL 地址会溢出边框,当 word-wrap 属性值为 break-word 时,URL 地址会沿边框自动换行。