FontData

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

FontData 介面是 Local Font Access API 的一部分,用於表示單個本地字型。

例項屬性

FontData.family 只讀 實驗性

返回字型家族。

FontData.fullName 只讀 實驗性

返回字型的完整名稱。

FontData.postscriptName 只讀 實驗性

返回字型的 PostScript 名稱。

FontData.style 只讀 實驗性

返回字型樣式。

例項方法

FontData.blob() 實驗性

返回一個 Promise,該 Promise fulfilled 時會得到一個 Blob 物件,其中包含底層字型檔案的原始位元組。

示例

有關即時示例,請參閱我們的 Local Font Access API 演示

字型列舉

以下程式碼段將查詢所有可用的字型,並記錄元資料。例如,這可以用於填充字型選擇控制元件。

js
async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

訪問低階資料

blob() 方法提供對低階 SFNT 資料的訪問——這是一種字型檔案格式,可以包含其他字型格式,例如 PostScript、TrueType、OpenType 或 Web Open Font Format (WOFF)。

js
async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` returns a Blob containing valid and complete
      // SFNT-wrapped font data.
      const sfnt = await fontData.blob();
      // Slice out only the bytes we need: the first 4 bytes are the SFNT
      // version info.
      // Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("Outline format:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

規範

規範
本地字型訪問 API
# fontdata-interface

瀏覽器相容性

另見