本地字体访问 API

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

本地字体访问 API 提供了一种访问用户本地安装的字体数据的机制,这包括名称、样式和字体系列等更高级别的详细信息,以及底层字体文件的原始字节。

概念与用法

Web 字体通过允许网页设计师为网页文档提供自定义字体,在网络排版方面具有革命性意义。通过 @font-face 规则指定,Web 字体可以从 url() 函数中提供的 URL 加载。

@font-face 还有其他一些有用的功能。特别是,您还可以将字体或 Postscript 名称完全指定在 local() 函数中,以告知浏览器如果用户在其计算机上安装了该字体,则使用本地副本。这并非没有问题,local() 已成为一种臭名昭著的 指纹识别矢量

此外,高端设计工具由于在准确枚举字体和访问低级字体数据(例如,应用滤镜和变换)方面存在挑战,因此在 Web 上一直难以实现。当前应用程序通常依赖于变通方法,例如要求用户将字体上传到服务器进行处理以获取原始字节数据,或者安装单独的本地程序以提供附加功能。

本地字体访问 API 的创建旨在解决这些问题。

Window.queryLocalFonts() 方法提供对本地安装字体数组的访问,每个字体都由一个 FontData 对象实例表示。 FontData 具有几个提供名称、样式和字体系列访问权限的属性,它还具有一个 blob() 方法,该方法提供对包含底层字体文件原始字节的 Blob 的访问。

在隐私和安全方面

  • 本地字体访问 API 的设计仅限于提供解决上述问题所需的数据访问。浏览器也没有义务提供可用本地字体的完整列表,也没有义务以与磁盘上相同的顺序提供数据。
  • 当调用 Window.queryLocalFonts() 时,会要求用户授权访问其本地字体。此权限的状态可以通过 Permissions APIlocal-fonts 权限)进行查询。
  • 您可以使用 local-fonts Permissions Policy 来控制对该功能的访问。

接口

FontData

表示单个本地字体。

其他接口的扩展

Window.queryLocalFonts()

返回一个 Promise,该 Promise 会解析为一个 FontData 对象数组,这些对象代表本地可用的字体。

示例

有关工作演示,请参阅我们的 本地字体访问 API 演示

特性检测

js
if ("queryLocalFonts" in window) {
  // The Local Font Access API is supported
}

字体枚举

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

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

浏览器兼容性

另见