FontFace: load() 方法

load() 是 FontFace 接口的方法，用于请求并加载其 source 属性指定为 URL 的字体。它返回一个 Promise，该 Promise 在加载字体时解析为当前的 FontFace 对象。

如果字体的 source 属性指定为二进制数据，或者字体的 status 属性不为 unloaded，则此方法不执行任何操作。

语法

js
load()

参数

无。

返回值

一个 Promise，当字体加载时解析为对当前 FontFace 对象的引用，如果加载过程失败则拒绝并抛出一个 NetworkError DOMException。

异常

NetworkError DOMException

表示加载字体的尝试失败。

示例

此简单示例加载字体，并使用它在画布元素（ID 为 js-canvas）中显示一些文本。

js
const canvas = document.getElementById("js-canvas");

// load the "Bitter" font from Google Fonts
const fontFile = new FontFace(
  "FontFamily Style Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(fontFile);

fontFile.load().then(
  () => {
    // font loaded successfully!
    canvas.width = 650;
    canvas.height = 100;
    const ctx = canvas.getContext("2d");

    ctx.font = '36px "FontFamily Style Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);

规范

规范
CSS 字体加载模块级别 3
# font-face-load

浏览器兼容性

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