文档:fonts 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

Document 接口的 fonts 属性返回文档的 FontFaceSet 接口。

此功能是 CSS Font Loading API 的一部分。

返回值是文档的 FontFaceSet 接口。FontFaceSet 接口对于加载新字体、检查先前加载字体的状态等非常有用。

示例

在字体加载完成后执行操作

js
document.fonts.ready.then((fontFaceSet) => {
  // Any operation that needs to be done only after all used fonts
  // have finished loading can go here.
  const fontFaces = [...fontFaceSet];
  console.log(fontFaces);
  // some fonts may still be unloaded if they aren't used on the site
  console.log(fontFaces.map((f) => f.status));
});

当所有使用的字体的加载和布局操作完成时,Promise 会 fulfilled。使用的字体集可能与声明的字体集不同,例如,如果可选字体(即通过 font-display: optional 声明的字体)未能及时加载。

规范

规范
CSS 字体加载模块等级 3
# FontFaceSet 接口

浏览器兼容性

另见