Local Font Access API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

概念和用法

Web 字体允许 Web 设计人员提供在 Web 文档上使用的自定义字体,因而在实现 Web 排版方面具有革命性意义。通过 @font-face at 规则,Web 字体可以通过 url() 函数中提供的 URL 加载。

@font-face 还有其他几个有用的特性。特别是,你还可以在 local() 函数中指定字体的完整名称或 Postscript 名称,以告诉浏览器在用户计算机上安装了该字体时使用本地副本。这并非没有问题——local() 作为指纹向量已经变得臭名昭著。

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

Local Font Access API 的创建就是为了解决这些问题。

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

在隐私和安全方面:

  • 本地字体访问 API 旨在仅提供对解决上述问题所需的数据的访问。它既不要求浏览器提供可用本地字体的完整列表,也不要求按照磁盘上出现的顺序提供数据。
  • 当调用 Window.queryLocalFonts() 时,系统会请求用户授予访问其本地字体的权限。此权限的状态可以通过权限 APIlocal-fonts 权限)查询。
  • 你可以使用 local-fonts 权限策略控制对此特性的访问。

接口

FontData

代表单个本地字体。

其他接口的扩展

Window.queryLocalFonts()

返回一个 Promise,它会兑现一个表示本地可用字体的 FontData 对象的数组。

示例

有关实时演示,请参阅字体选择演示

特性检测

js
if ("queryLocalFonts" in window) {
  // 支持本地字体访问 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 开放字体格式(WOFF)。

js
async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` 方法返回一个包含有效且完整的 SFNT 包装字体数据的 Blob。
      const sfnt = await fontData.blob();
      // 仅裁剪出我们需要的字节部分:前 4 个字节是 SFNT 版本信息。
      // 规范:https://learn.microsoft.com/zh-cn/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("矢量字体格式:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

规范

Specification
Local Font Access API

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
queryLocalFonts
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见