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

浏览器兼容性

另见