font-face
它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,font-face可以消除对用户电脑字体的依赖。 font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。
语法
@font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [ font-variant: <font-variant>; ] || [ font-feature-settings: <font-feature-settings>; ] || [ font-variation-settings: <font-variation-settings>; ] || [ font-stretch: <font-stretch>; ] || [ font-weight: <font-weight>; ] || [ font-style: <font-style>; ] || [ size-adjust: <size-adjust>; ] || [ ascent-override: <ascent-override>; ] || [ descent-override: <descent-override>; ] || [ line-gap-override: <line-gap-override>; ] }
在 @font-face 规则中:首先定义字体的名称(例如 myFirstFont),然后指向该字体文件。
提示:字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。
如需将字体用于 HTML 元素,请通过 font-family 属性引用字体名称(myFirstFont):
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; }
还可以添加粗体文字
@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }
CSS 字体描述
下表列出了能够在 @font-face 规则内定义的所有字体描述符(font descriptor):
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。定义字体名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
| 可选。定义应如何拉伸字体。默认值是 "normal"。 |
font-style |
| 可选。定义字体的样式。默认值是 "normal"。 |
font-weight |
| 可选。定义字体的粗细。默认值是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。 |