CSS 中的 @font-face 规则用于定义自定义字体并使其可用于您的网页。此规则允许网页设计人员嵌入或链接到字体文件，然后可以使用这些字体文件来设置网页上的文本元素的样式。
自定义字体可以从远程服务器加载，也可以从用户设备上的本地安装字体加载。
概述
- url（） 和 local（） 都可以同时使用。如果本地副本可用且匹配，则可以使用本地副本，否则将使用远程服务器中的自定义字体作为回退选项。
- local（） 应该写在 url（） 之前，因为浏览器按照其声明列表的顺序加载资源。
- local（） 和 url（） 这两个函数都是可选的。
- 具有一个或多个 local（） 且不带 url（） 的规则块是有效的。
- 更具体的字体应在不太具体的字体版本之前列出。
- @font-face 允许用户定义自己的自定义字体，从而可以超越 Web 安全字体，而不仅仅是依赖互联网连接。
语法
@font-face =
@font-face { <declaration-list> }
CSS @font-face 规则可以在任何 CSS conditional-group-at-rule 中使用，除了在顶层使用。
CSS @font-face - 字体 MIME 类型
MIME 代表多用途 Internet 邮件扩展有助于指示文档或文件的性质和格式。
下表显示了不同的格式及其关联的 MIME 类型：
| 格式 | MIME 类开型 |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open Font Format | font/woff |
| Web Open Font Format 2 | font/woff2 |
对于网页字体，也适用相同的域限制，即字体文件必须与使用它们的网页位于同一域中。
不能在 CSS 选择器中声明 @font-face 规则。
不能在 CSS 选择器中声明 @font-face 规则。
CSS @font-face - 指定本地字体替代项
以下示例演示了如何使用“Sansation Light Font”的本地副本使用 @font-face 规则。
<html>
<head>
<style>
@font-face {
font-family: "Sansation Light Font";
src: url("font/SansationLight.woff");
}
body {
font-family: "Sansation Light Font", serif;
}
</style>
</head>
<body>
<h2>@font-face at-rule</h2>
<p>This is SansationLight Font.</p>
</body>
</html>
描述 符
下表列出了与 @font-face 相关的所有描述符：
| 描述符/属性 | 描述 |
|---|---|
| ascent-override | 设置字体的上升度量。 |
| descent-override | 设置字体的下降度量。 |
| font-display | 指定字体的显示方式。 |
| font-family | 确定将用作字体属性的字体表面值的名称。 |
| font-stretch | 从字体设置字体。 |
| font-style | 设置字体的样式。 |
| font-weight | 设置字体的粗细或粗体。 |
| line-gap-override | 设置所选字体的行距度量。 |
| size-adjust | 设置与所选字体关联的字形轮廓和度量的乘数。 |
| src | 提供对字体资源（如格式和技术）的引用。要使@font面规则有效，这是必需的。. |
| unicode-range | 提供 Unicode 代码打印范围的字体。 |
