CSS @font-face 规则
示例
指定一个名为 "myFirstFont" 的字体，并指定其所在 URL
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
亲自试一试 »
更多“亲自试一试”示例在下方。
定义和用法
使用 @font-face 规则，网页设计师不再需要使用“网页安全”字体。
在 @font-face 规则中，您必须首先为字体定义一个名称（例如 myFirstFont），然后指向字体文件。
要将字体用于 HTML 元素，请通过 font-family 属性引用字体的名称 (myFirstFont)
div {
font-family: myFirstFont;
}
浏览器支持
Edge、Chrome、Firefox、Safari 和 Opera 均支持 @font-face 规则。
表格中的数字指定了完全支持字体格式的第一个浏览器版本。
| 字体格式 | |||||
|---|---|---|---|---|---|
| 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-family | 名称 | 必需。定义字体的名称。 |
| src | URL | 必需。定义应从中下载字体的 URL。 |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可选。定义应如何拉伸字体。默认值为“normal”。 |
| font-style | normal italic oblique |
可选。定义应如何设置字体的样式。默认值为“normal”。 |
| font-weight | normal bold 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 网页字体
