@font-face
Baseline 广泛可用 *
@font-face CSS at-rule 允许您指定一个自定义字体来显示文本；该字体可以从远程服务器加载，也可以从用户计算机上本地安装的字体加载。
语法
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff");
}
描述符
ascent-override-
定义字体的上升度量。
descent-override-
定义字体的下降度量。
font-display-
根据字体是否已下载并可供使用，以及何时下载并可供使用，确定其显示方式。
font-family-
指定一个名称，该名称将用作字体属性的字体面值。
@font-face规则需要一个font-family名称才能有效。 font-stretch-
一个
font-stretch值。接受两个值来指定字体支持的范围，例如font-stretch: 50% 200%; font-style-
一个
font-style值。接受两个值来指定字体支持的范围，例如font-style: oblique 20deg 50deg; font-weight-
一个
font-weight值。接受两个值来指定字体支持的范围，例如font-weight: 100 400; font-feature-settings-
允许控制 OpenType 字体中的高级排版功能。
font-variation-settings-
通过指定要变化的特性的四字母轴名称及其变化值，允许对 OpenType 或 TrueType 字体变体进行低级控制。
line-gap-override-
定义字体的行间距度量。
size-adjust-
定义此字体相关的字形轮廓和度量的乘数。这使得在相同字体大小下渲染各种字体时，更容易协调它们的设计。
src-
指定字体资源的引用，包括有关字体格式和技术的提示。
@font-face规则需要src才能有效。 unicode-range-
要从字体中使用的 Unicode 码点范围。
描述
通常将 url() 和 local() 一起使用，以便如果可用，则使用用户安装的字体副本，如果用户设备上未找到该字体，则回退到下载字体副本。
如果提供了 local() 函数，指定要在用户设备上查找的字体名称，并且如果用户代理找到匹配项，则使用该本地字体。否则，下载并使用使用 url() 函数指定的字体资源。
浏览器尝试按其列表声明顺序加载资源，因此通常 local() 应该写在 url() 之前。这两个函数都是可选的，因此只包含一个或多个 local() 而没有 url() 的规则块是可能的。如果需要具有 format() 或 tech() 值的更具体的字体，则应将其列在没有这些值的版本之前，因为否则会首先尝试并使用不太具体的变体。
通过允许作者提供自己的字体，@font-face 使得设计内容不再局限于所谓的“网络安全”字体（即，非常常见以至于被认为是普遍可用的字体）。指定要查找和使用的本地安装字体的名称的能力，使得可以超越基本功能自定义字体，同时无需依赖互联网连接即可实现。
注意：在旧版浏览器上加载字体的回退策略在src 描述符页面中描述。
@font-face at-rule 不仅可以在 CSS 的顶层使用，也可以在任何 CSS conditional-group at-rule 内部使用。
字体 MIME 类型
| 格式 | MIME 类型 |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open Font Format | font/woff |
| Web Open Font Format 2 | font/woff2 |
注意
-
网络字体受相同的域限制（字体文件必须与使用它们的页面在同一域上），除非使用HTTP 访问控制来放宽此限制。
-
@font-face不能在 CSS 选择器中声明。例如，以下代码将不起作用css.className { @font-face { font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.ttf"); font-weight: bold; } }
正式语法
@font-face =
@font-face { <declaration-list> }
示例
指定可下载字体
此示例指定要使用的可下载字体，并将其应用于文档的整个正文
<body>
This is Bitstream Vera Serif Bold.
</body>
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
指定本地字体替代项
在此示例中，使用用户的本地副本“Helvetica Neue Bold”；如果用户未安装该字体（同时尝试完整的字体名称和 Postscript 名称），则使用名为“MgOpenModernaBold.ttf”的可下载字体代替
@font-face {
font-family: "MyHelvetica";
src:
local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-face-rule |
浏览器兼容性
加载中…