Window: queryLocalFonts() 方法

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

安全上下文： 此功能仅在 安全上下文（HTTPS）中可用，在某些或所有 支持的浏览器 中可用。

window.queryLocalFonts() 方法返回一个 Promise，该 Promise 将用表示本地可用的字体面部的 FontData 对象数组来完成。

要使用此方法，用户必须授予访问 local-fonts 的权限（可以通过 权限 API 查询权限状态）。此外，此功能可能会被服务器上设置的 权限策略 阻止。

语法

js
queryLocalFonts(options)

参数

options 可选

包含可选的配置参数。目前只定义了一个属性

postscriptNames 可选

一个字体 PostScript 名称数组。如果指定了此参数，则结果中将只包含 PostScript 名称与数组中的名称匹配的字体；如果没有指定，则结果中将包含所有字体。

返回值

一个 Promise，该 Promise 将用表示本地可用的字体面部的 FontData 对象数组来完成。

异常

NotAllowedError DOMException

用户在第一次调用方法后，在浏览器显示的权限提示中选择拒绝使用此功能的权限。

SecurityError DOMException

此功能的使用被 权限策略 阻止，或者它不是通过用户交互（例如按钮按下）调用的，或者当前 来源 是不透明的来源。

示例

有关工作示例，请参阅 字体选择演示。

字体枚举

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

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);
  }
}

限制返回的结果

要将返回的字体数据限制为仅特定字体面部列表，请使用 postscriptNames 选项。

js
async function returnSpecificFonts() {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
  });

  return availableFonts;
}

访问底层数据

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);
  }
}

规范

规范
本地字体访问
# dom-window-querylocalfonts

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅