Local Font Access 浏览器支持

Local Font Access API 的 window.queryLocalFonts() 方法返回一个 Promise，解析为 描述用户设备上已安装字体的 FontData 对象数组，需要经过 local-fonts 权限提示授权。

浏览器与生态支持

• 图例
• 支持
• 部分支持
• 需开启标志
• 不支持
• 未知

浏览器 / 平台	支持	版本	置信度	来源	备注
Chrome (Desktop)	支持	103	高	来源	—
Chrome (Android)	不支持	—	高	来源	1
Edge (Desktop)	支持	103	高	来源	2
Firefox (Desktop)	不支持	—	高	来源	3
Firefox (Android)	不支持	—	高	来源	45
Safari (macOS)	不支持	—	高	来源	6
Safari (iOS)	不支持	—	高	来源	78
Samsung Internet	不支持	—	高	来源	910
WebView (Android)	不支持	—	高	来源	1112

1. 实现跟踪：https://crbug.com/40840834。
2. 由 browser-compat-data 镜像自 Chrome 的数据推导。
3. browser-compat-data 未记录 Firefox 的支持。
4. browser-compat-data 未记录 Firefox for Android 的支持。
5. 由 browser-compat-data 镜像自 Firefox 的数据推导。
6. browser-compat-data 未记录 Safari 的支持。
7. browser-compat-data 未记录 iOS 版 Safari 的支持。
8. 由 browser-compat-data 镜像自 Safari 的数据推导。
9. 实现跟踪：https://crbug.com/40840834。
10. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。
11. 实现跟踪：https://crbug.com/40840834。
12. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。

源数据: /compatibility/local-font-access.json · 全球使用占比: 37 % (StatCounter 2026-05)

来源: 规范 · MDN · 最近核验 2026-10-03 · 置信度: 高 (由来源计算)

如何使用

queryLocalFonts() 必须在用户手势的事件处理函数中调用（例如按钮的 click 监听器）——在脚本顶层直接调用会抛出 SecurityError。将整段代码粘贴到一个 HTML 文件中并点击按钮，即可触发真实的手势门控路径：

<button id="choose-local-fonts">选择本地字体</button>
<script>
  document.querySelector('#choose-local-fonts').addEventListener('click', async () => {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName, fontData.fullName, fontData.family, fontData.style);
    }
  });
</script>

如何在运行时检测

在调用前先特性检测 queryLocalFonts，并在不可用或调用失败时回退到一份固定的 CSS 通用字体族列表：

// 本地字体枚举不可用时所使用的 CSS 通用字体族。
const BUNDLED_FONTS = ['system-ui', 'sans-serif', 'serif', 'monospace'];

async function listLocalFonts() {
  if (!('queryLocalFonts' in window)) {
    // 不支持的浏览器（Firefox、Safari 或较旧的 Chromium）：无法进行本地字体
    // 枚举，因此改为提供通用字体族回退。
    return BUNDLED_FONTS;
  }
  try {
    const fonts = await window.queryLocalFonts();
    return fonts.map((fontData) => fontData.fullName);
  } catch (err) {
    // 权限被拒绝，或未在用户手势中调用：同样回退。
    return BUNDLED_FONTS;
  }
}

实践清单

• Firefox 与 Safari 均未实现 queryLocalFonts()——根据上表，支持范围仅限于 Chromium 桌面浏览器，因此请始终保留通用字体族回退。
• queryLocalFonts() 仅在安全上下文中可用；根据 MDN，若在没有用户交互的情况下 调用，或被 Permissions Policy 阻止，会抛出 SecurityError；请单独捕获 NotAllowedError 以处理用户拒绝授权的情况。
• 根据 MDN，返回的列表不保证详尽，也不按文件系统顺序排列——不要假设它报告了 所有已安装的字体。

下一步

• File System Access API
• WebGPU

← 返回兼容性浏览器。