HTML5 LocalFontAccess获取系统字体列表实现在线设计

想通过网页直接读取用户电脑里装了什么字体，然后用在在线设计工具里？这个想法很自然，但现实是，目前这条路在Web标准层面是走不通的。很多人误以为存在一个叫 LocalFontAccess 的HTML5 API，其实这是一个普遍的误解。

LocalFontAccess 并不存在于当前 Web 标准中

直接说结论：截至2024年底，你在任何官方的W3C规范、WHATWG HTML标准，或者Chrome、Firefox、Safari、Edge这些主流浏览器的文档里，都找不到一个名为 LocalFontAccess 的现成API。

这个误解通常来自对几项不同技术的混淆：

• Font Access API（草案）：这确实是WICG提出的一个实验性提案，目标就是让网页能安全地枚举和加载本地字体。但它目前仍处于非常早期的草案阶段。即便在最新的Chrome Canary版本里，也需要手动开启实验性标志才能试用，而且明确不推荐用于生产环境。
• CSS @font-face：这个大家很熟悉，但它只能加载开发者自己提供的字体文件（比如.woff2格式），无法探测用户系统里已经安装了什么字体。
• Canvas文字度量或 document.fonts：这些API只能反映当前网页页面内已经加载或可用的字体状态，同样无法触及操作系统级别的完整字体列表。

所以，想通过一个不存在的标准API来“一键获取系统字体”，目前是行不通的。

当前可行的替代方案（有限但实用）

既然直接读取系统字体列表此路不通，那么现有的网页设计工具是怎么做的呢？它们通常采用以下几种方法组合，来模拟或提供类似的字体选择体验：

• 预置常用字体族映射表：这是一种“猜”的策略。通过 na vigator.platform 或用户袋里字符串，粗略判断用户的操作系统，然后提供一套该平台下最可能存在的“安全字体”列表。例如：
  • Windows 用户，就默认提供像 “Segoe UI”, “Microsoft YaHei”, “Arial” 这样的字体栈。
  • macOS 用户，则对应 “SF Pro Display”, “Helvetica Neue”, “PingFang SC” 等。
  • Linux 用户也有 “Noto Sans”, “DejaVu Sans” 等常见选项。
  这样能确保设计在不同系统下有相对一致的预览效果，虽然不一定能用到用户装的所有特殊字体。
• Web Font 服务集成：这是更主流和可靠的做法。直接接入像 Google Fonts、Adobe Fonts 这样的在线字体库，或者自建字体CDN。工具本身提供数百甚至上千款高质量、可自由调用的字体。用户在设计时，实际上使用的是从网络加载的Web字体，这就彻底摆脱了对用户本地字体的依赖，保证了跨平台的绝对一致性。
• 用户手动上传字体：对于专业设计工具（比如Figma的网页版），会提供“上传字体文件”的功能。利用标准的 元素和 FileReader API，让用户选择本地的 .ttf 或 .otf 字体文件，然后通过 @font-face 或 FontFace API 动态加载到当前网页中使用。这既满足了专业用户使用特定字体的需求，又完全符合浏览器的安全规范。

未来展望：Font Access API 的实际使用方式（实验阶段）

那么，前面提到的那个实验性的 Font Access API 未来会怎么用呢？如果它最终被标准化并广泛实现，其调用逻辑可能会类似下面这样：

if ('queryLocalFonts' in window) {
  try {
    const fonts = await window.queryLocalFonts({
       postscriptNames: ['Helvetica', 'TimesNewRomanPSMT'] // 可以可选地过滤字体
    });
    console.log(fonts.map(f => f.fullName)); // 例如输出：['Helvetica Neue', 'Times New Roman']
  } catch (err) {
    console.warn('用户拒绝访问或浏览器不支持', err);
  }
}

需要特别注意两点：首先，这必须经过用户的明确授权，浏览器会弹出权限请求对话框。其次，出于安全和隐私考虑，即便授权后，网页能获取的也仅仅是字体的元数据（如字体名称），而无法拿到字体文件的完整路径或任意读取文件内容，更不可能绕过安全策略去“扫描”整个系统。

总而言之，现阶段所有成熟的网页在线设计工具（如Canva、Figma、Photopea），其核心策略都不是去枚举系统字体。它们依靠的是“Web字体服务 + 用户上传 + 智能回退策略”这套组合拳，来同时保障设计效果的跨平台一致性、功能的实用性以及操作的合规安全性。试图在网页端强行“扫描本地字体”，不仅技术上行不通，也违背了现代浏览器的隐私与安全设计原则。