@font-face

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它自以下版本起在所有浏览器中均可用： 2016年9月.

**`@font-face`** CSS @规则 指定一个自定义字体来显示文本；该字体可以从远程服务器或用户计算机上本地安装的字体加载。

语法

css
@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-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-variant 描述符已于 2018 年从规范中删除。`font-variant`值属性受支持，但没有等效的描述符。

font-feature-settings

允许控制 OpenType 字体中的高级排版功能。

font-variation-settings

通过指定要变化的功能的四个字母轴名称及其变化值，允许对 OpenType 或 TrueType 字体的变化进行低级控制。

line-gap-override

定义字体的行间距度量。

size-adjust

定义与该字体关联的字形轮廓和度量的乘数。这使得在相同字体大小下渲染各种字体时，更容易协调其设计。

src

指定对字体资源的引用，包括关于字体格式和技术的提示。对于 `@font-face` 规则有效，这是必需的。

unicode-range

要从字体中使用的 Unicode 代码点的范围。

描述

通常将 `url()` 和 `local()` 结合使用，以便在可用时使用用户安装的字体副本，如果在用户设备上找不到，则回退到下载字体副本。

如果提供了 `local()` 函数，则指定要在用户设备上查找的字体名称，如果用户代理找到匹配项，则使用该本地字体。否则，将下载并使用使用 `url()` 函数指定的字体资源。

浏览器尝试按其列表声明顺序加载资源，因此通常应在 `url()` 之前编写 `local()`。这两个函数都是可选的，因此包含一个或多个 `local()` 而不包含 `url()` 的规则块是可能的。如果需要具有 `format()` 或 `tech()` 值的更具体的字体，则应将其列在没有这些值的版本之前，因为否则将首先尝试并使用不太具体的变体。

通过允许作者提供自己的字体，@font-face 使设计内容不受限于所谓的“网页安全”字体（即，如此常见以至于被认为普遍可用的字体）成为可能。指定要查找和使用的本地安装字体的名称的能力，使得能够在基础之上自定义字体，同时无需依赖互联网连接即可实现。

注意：在较旧的浏览器上加载字体的回退策略在src 描述符页面中进行了描述。

@font-face at-rule 不仅可以在 CSS 的顶层使用，还可以用于任何CSS 条件组 at-rule内部。

字体 MIME 类型

格式 MIME 类型
TrueType font/ttf
OpenType font/otf
Web 开放字体格式 font/woff
Web 开放字体格式 2 font/woff2

备注

  • Web 字体受相同的域名限制（字体文件必须与使用它们的页面位于同一域名下），除非使用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> }

示例

指定可下载字体

此示例指定要使用的可下载字体，并将其应用于文档的整个主体

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
      @font-face {
        font-family: "Bitstream Vera Serif Bold";
        src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
      }

      body {
        font-family: "Bitstream Vera Serif Bold", serif;
      }
    </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>

此示例代码的输出如下所示

指定本地字体替代方案

在此示例中，使用用户本地安装的“Helvetica Neue Bold”；如果用户未安装该字体（会尝试使用完整字体名称和 Postscript 名称），则使用名为“MgOpenModernaBold.ttf”的可下载字体。

css
@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}

规范

规范
CSS 字体模块级别 4
# font-face-rule

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅