FontFace

FontFace 接口是 CSS 字体加载 API 的一部分，表示单个可用的字体面。

此接口定义了字体面的来源，可以是外部资源的 URL 或缓冲区，以及字体属性，如 style、weight 等。对于 URL 字体源，它允许作者触发远程字体何时被获取和加载，并跟踪加载状态。

构造函数

FontFace(): 构造并返回一个新的 FontFace 对象，该对象由 URL 描述的外部资源或 ArrayBuffer 构建。

实例属性

FontFace.ascentOverride: 一个字符串，用于获取或设置字体的上行度量。它等效于 ascent-override 描述符。
FontFace.descentOverride: 一个字符串，用于获取或设置字体的下行度量。它等效于 descent-override 描述符。
FontFace.display: 一个字符串，用于根据字体是否以及何时下载并准备使用来确定字体面的显示方式。
FontFace.family: 一个字符串，用于获取或设置字体的族。它等效于 font-family 描述符。
FontFace.featureSettings: 一个字符串，用于获取或设置不常用且无法从字体的变体属性中获得的字体特性。它等效于 CSS font-feature-settings 属性。
FontFace.lineGapOverride: 一个字符串，用于获取或设置字体的行间距度量。它等效于 line-gap-override 描述符。
FontFace.loaded 只读: 返回一个 Promise，当对象构造函数中指定的字体加载完成时，该 Promise 将解析为当前的 FontFace 对象，或者如果发生错误则拒绝并抛出一个 SyntaxError DOMException。
FontFace.status 只读: 返回一个枚举值，指示字体的状态，可以是 "unloaded"、"loading"、"loaded" 或 "error" 之一。
FontFace.stretch: 一个字符串，用于获取或设置字体如何拉伸。它等效于 font-stretch 描述符。
FontFace.style: 一个字符串，用于获取或设置字体的样式。它等效于 font-style 描述符。
FontFace.unicodeRange: 一个字符串，用于获取或设置包含字体的Unicode 代码点范围。它等效于 unicode-range 描述符。
FontFace.variant 非标准: 一个字符串，用于获取或设置字体的变体。
FontFace.variationSettings 实验性: 一个字符串，用于获取或设置字体的变体设置。它等效于 font-variation-settings 描述符。
FontFace.weight: 一个包含字体粗细的字符串。它等效于 font-weight 描述符。
FontFace.load(): 根据当前对象构造函数传递的要求加载字体，包括位置或源缓冲区，并返回一个 Promise，该 Promise 解析为当前的 FontFace 对象。

示例

以下代码使用 URL "myfont.woff" 中的数据定义了一个字体面，并带有一些字体描述符。为了演示其工作原理，我们随后使用属性定义了 stretch 描述符。

//Define a FontFace
const font = new FontFace("myfont", "url(myfont.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 > 示例。

规范

规范
CSS 字体加载模块级别 3 # fontface-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

@font-face