CSS的字体样式属性
CSS的字体样式属性用于定义文本的字体系列、大小、风格等，CSS常用的字体样式属性如表3-9所示。
表3-9 字体样式属性
| 属性 | 允许取值 | 描述 |
| font-size:字号大小 | 1em、5em等 | em表示相对于当前对象内文本的字体尺寸 |
| 5px | px表示像素，最为常用，推荐使用 |
| font-family:字体 | “微软雅黑” | 网页中常用的字体有宋体、微软雅黑、黑体等 |
| font-weight:字体粗细 | normal | 默认值，定义标准的字符 |
| border | 定义粗体字符 |
| bolder | 定义更粗体字符 |
| ligthter | 定义更细字体 |
| 100~900 | 定义由细到粗的字符，其中400等同于normal |
| font-style:字体风格 | normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
| oblique | 浏览器会显示倾斜的字体样式 |
| word-wrap:长单词或URL自动换行 | normal | 只在允许的断点处换行（默认） |
| break-word | 在长单词或URL地址内部自动换行 |
1.字体属性合写
除以上常用的属性外，CSS还支持字体的合成功能，font属性用于对字体样式进行综合设置，其基本语法格式如下。
| 选择器{font:font-style || font-weight || font-size || line-height || font-family} |
2.CSS3的@font-face规则
@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机中未安装的字体。
@font-face规则的语法格式如下：
| @font-face{ font-family:<YourWebFontName>; src:<source>[<format>][,<source>[<format>]]*; [font-weight:<weight>] [font-style:<style>];} |
@font-face规则的取值说明如下。
(1)YourWebFontName：自定义的字体名称，最好是使用下载的默认字体，它将被引用到Web元素中的font-family,如“font-family:”myFont””.
source:此值指的是自定义的字体存放路径，可以是相对路径也可以是绝对路径。
(2)format:此值指的是自定义的字体格式，主要用来帮助浏览器识别自定义的字体格式，其值主要有truetype、opentype、truetype-aat、 embedded-opentype 、svg等几种类型。
(3)weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。
@font-face规则的具体用法如例3-4所示。运行页面效果如图3-6所示。
例3-4 example04.html
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face用法</title> </head> <style> @font-face { font-family:myFont; src: url('font/书法.ttf'); } div{ font-family: myFont; font-size: 4em; } </style> <body> <div>使用@font-size,应用漂亮的Web字体</div> </body> </html> |
图3-6 特殊字体的页面效果
