CSS @font-face 规则
示例
指定一个名为“myFirstFont”的字体，并指定其 URL 所在的位置
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
使用 @font-face 规则，网页设计师不再需要使用“Web 安全字体”之一。
在 @font-face 规则中，您必须先定义字体的名称（例如 myFirstFont），然后指向字体文件。
要将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）
div {
font-family: myFirstFont;
}
浏览器支持
@font-face 规则在 Edge、Chrome、Firefox、Safari 和 Opera 中得到支持。
表中的数字表示完全支持该字体格式的第一个浏览器版本。
| 字体格式 | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | 不支持 | 不支持 | 不支持 | 3.2 | 不支持 |
| EOT | 6.0 | 不支持 | 不支持 | 不支持 | 不支持 |
*仅当字体格式设置为“可安装”时，该字体格式才有效。
语法
@font-face {
font-properties
}
| Font descriptor | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。定义字体的名称。 |
| src | URL | 必需。定义应从中下载字体的 URL。 |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可选。定义字体应如何拉伸。默认值为“normal” |
| font-style | normal 斜体 倾斜 |
可选。定义字体应如何样式化。默认值为“normal” |
| font-weight | normal 粗体 100 200 300 400 500 600 700 800 900 |
可选。定义字体的粗细。默认值为“normal” |
| unicode-range | unicode-range | 可选。定义字体支持的 Unicode 字符范围。默认值为“U+0-10FFFF” |
更多示例
示例
您必须添加另一个包含粗体文本描述符的 @font-face 规则
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
自己动手试一试 »
文件“sansation_bold.woff”是另一个字体文件，它包含了 Sansation 字体的粗体字符。
当字体族为“myFirstFont”的文本需要渲染为粗体时，浏览器将使用此设置。
这样，您可以为同一个字体设置多个 @font-face 规则。
相关页面
CSS 教程：CSS Web 字体
