FontFace

构造函数

FontFace()

构造并返回一个新的 FontFace 对象，该对象可以从 URL 指定的外部资源或 ArrayBuffer 构建。

实例属性

FontFace.ascentOverride

一个字符串，用于获取或设置字体的升序度量 (ascent metric)。它等同于 ascent-override 描述符。

FontFace.descentOverride

一个字符串，用于获取或设置字体的降序度量 (descent metric)。它等同于 descent-override 描述符。

FontFace.display

一个字符串，用于根据字体是否已下载以及何时准备好使用来决定如何显示字体。

FontFace.family

一个字符串，用于获取或设置字体的字体族 (family)。它等同于 font-family 描述符。

FontFace.featureSettings

一个字符串，用于获取或设置字体中不常用但又无法通过字体变体属性（variant properties）访问的字体特性。它等同于 CSS 的 font-feature-settings 属性。

FontFace.lineGapOverride

一个字符串，用于获取或设置字体的行间距度量 (line-gap metric)。它等同于 line-gap-override 描述符。

FontFace.loaded 只读

返回一个 Promise，当构造函数中指定的字体加载完成后，该 Promise 会解析为当前的 FontFace 对象；如果发生语法错误，则会以 SyntaxError DOMException 拒绝。

FontFace.status 只读

返回一个枚举值，指示字体的状态，可以是 "unloaded"（未加载）、"loading"（正在加载）、"loaded"（已加载）或 "error"（错误）。

FontFace.stretch

一个字符串，用于获取或设置字体的拉伸 (stretch) 方式。它等同于 font-stretch 描述符。

FontFace.style

一个字符串，用于获取或设置字体的样式 (style)。它等同于 font-style 描述符。

FontFace.unicodeRange

一个字符串，用于获取或设置字体所包含的Unicode 码点范围。它等同于 unicode-range 描述符。

FontFace.variant 非标准

一个字符串，用于获取或设置字体的变体 (variant)。

FontFace.variationSettings

一个字符串，用于获取或设置字体的变体设置 (variation settings)。它等同于 font-variation-settings 描述符。

FontFace.weight

一个字符串，包含字体的字重 (weight)。它等同于 font-weight 描述符。

FontFace.load()

根据当前对象的构造函数中传递的要求（包括位置或源缓冲区）加载字体，并返回一个 Promise，该 Promise 解析为当前的 FontFace 对象。

示例

以下代码使用 URL "my-font.woff" 的数据和一些字体描述符来定义一个字体。为了演示，我们还通过属性定义了 stretch 描述符。

// Define a FontFace
const font = new FontFace("my-font", 'url("my-font.woff")', {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";

接下来，我们使用 FontFace.load() 加载字体，并利用返回的 Promise 来跟踪加载完成或报告错误。

// Load the font
font.load().then(
  () => {
    // Resolved - add font to document.fonts
  },
  (err) => {
    console.error(err);
  },
);

要实际使用字体，我们需要将其添加到 FontFaceSet 中。我们可以选择在加载字体之前或之后进行此操作。

更多示例请参阅 CSS 字体加载 API > 示例。

规范

浏览器兼容性

另见

• @font-face