FontData

实验性： 这是 实验性技术
在生产环境中使用此技术之前，请仔细查看 浏览器兼容性表。

FontData 是 本地字体访问 API 的一个接口，它表示单个本地字体。

实例属性

FontData.family 只读

返回字体的家族。

FontData.fullName 只读

返回字体的完整名称。

FontData.postscriptName 只读

返回字体的 PostScript 名称。

FontData.style 只读

返回字体的样式。

实例方法

FontData.blob()

返回一个 Promise，该 Promise 将使用包含底层字体文件原始字节的 Blob 来完成。

示例

有关工作中的实时演示，请参阅 字体选择演示。

字体枚举

以下代码段将查询所有可用字体并记录元数据。例如，这可用于填充字体选择器控件。

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://docs.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);
  }
}

规范

规范
本地字体访问
# fontdata-interface

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见