CSS @font-face 规则
CSS @font-face 规则
定义和用法
通过使用 @font-face 规则，Web 设计师不必再使用任何一种“网络安全”字体。
在 @font-face 规则中，您必须首先定义字体名称（例如 myFirstFont），然后指向字体文件。
提示：字体的 URL 使用小写字母。大写字母可能会在 IE 中产生意外结果！
如需将字体用于 HTML 元素，请通过 font-family 属性引用字体的名称（myFirstFont）：
div {
font-family: myFirstFont;
}
另请参阅：
CSS 教程：CSS Web 字体
实例
指定一种名为 "myFirstFont" 的字体，并规定可以找到它的 URL：
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>@font-face 规则</h1>
<div>通过 CSS，网站终于可以使用除预先选择的“网络安全”字体以外的其他字体。</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
可以在页面下方找到更多 TIY 实例。
CSS 语法
@font-face {
font-properties
}
| 字体描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。定义字体名称。 |
| src | URL | 必需。定义下载字体的 URL。 |
| font-stretch |
|
可选。定义应如何拉伸字体。默认值是 "normal"。 |
| font-style |
|
可选。定义字体样式。默认值是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认值是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 Unicode 字符范围。默认值是 "U+0-10FFFF"。 |
更多实例
示例代码：
您必须添加另一个 @font-face 规则，其中包含粗体文本的描述符：
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>@font-face 规则</h1>
<div>通过 CSS，网站终于可以使用除预先选择的“网络安全”字体以外的其他字体。</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。
每当设置字体族 "myFirstFont" 的一段文本应呈现为粗体时，浏览器就会使用它。
这样，您可以为同一字体设置多个 @font-face 规则。
浏览器支持
Internet Explorer、Firefox、Opera、Chrome 和 Safari 都支持 @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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
* Edge 和 IE: 字体格式仅在设置为 "installable" 时有效
* Firefox：默认情况下是禁用的，但可启用（需要将 flag 设置为 "true" 才能使用 WOFF2）。
