文件: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 介面

瀏覽器相容性

另見