local fonts access 是 web 平台新能力，允许网页在用户授权后直接读取设备本地字体文件（如 .ttf、.woff2），实现高保真排版；目前仅 chrome 120+/edge 120+ 桌面版支持，需 https/localhost 安全上下文及显式权限。
Local Fonts Access（本地字体访问）是 Web 平台一项较新的能力，允许网页在用户明确授权后，直接读取设备上已安装的字体文件（如 .ttf、.woff2），从而实现更精细、更专业的排版控制。它不依赖网络下载（如 Google Fonts），也不受限于系统默认字体列表，是构建高保真文字编辑器（如设计工具、出版级富文本编辑器）的关键基础。
但需注意：Local Fonts Access 目前仅在 Chrome 120+（桌面端）、Edge 120+ 中稳定支持，且必须运行于安全上下文（HTTPS 或 localhost），并需用户主动授予 local-fonts 权限。
以下分三部分说明如何落地：
一、请求并枚举本地可用字体
调用 window.queryLocalFonts() 获取用户授权后的字体列表，返回 Promise，解析为 FontMetadata 对象数组：
async function listLocalFonts() {
try {
const fonts = await window.queryLocalFonts();
return fonts.map(f => ({
fullName: f.fullName,
postscriptName: f.postscriptName,
family: f.family,
style: f.style,
weight: f.weight,
stretch: f.stretch
}));
} catch (err) {
console.warn("未获授权或不支持 Local Fonts Access", err);
}
}
- 每个字体对象含
fullName（如"Inter Bold"）、postscriptName（唯一标识，如"Inter-Bold"）、family（如"Inter"）等关键字段； -
weight是数值（100–900），非字符串"bold"，便于做字重匹配与降级； - 实际使用中建议缓存结果，并提供“刷新字体列表”按钮，因用户可能中途安装新字体。
二、将本地字体注入 CSS 并应用于 DOM 文本
获取字体后，不能直接用 font-family: "xxx" 引用——必须先通过 @font-face 注册。关键步骤：
- 调用
font.blob()得到字体二进制数据； - 创建
URL.createObjectURL(blob)生成临时 blob URL； - 动态插入
<style></style>，写入@font-face规则（含src: url(...)和元数据）； - 在编辑区域（如
contenteditable元素）中设置font-family。
示例代码：
对设计或页面进行 WCAG 2.1 AA 无障碍审计。触发关键词：“audit accessibility”、 “check a11y”、 “is this accessible?” 或在审查设计时使用。
async function installFont(font) {
const blob = await font.blob();
const url = URL.createObjectURL(blob);
const style = document.createElement('style');
style.textContent = `
@font-face {
font-family: "${font.fullName}";
src: url(${url});
font-weight: ${font.weight};
font-style: ${font.style === 'italic' ? 'italic' : 'normal'};
font-stretch: ${font.stretch || '100%'};
font-display: swap;
}
`;
document.head.appendChild(style);
// 后续可安全用于 CSS：
// element.style.fontFamily = `"${font.fullName}", sans-serif`;
}
⚠️ 注意事项：
- 每个字体 blob URL 必须在页面生命周期内保持有效；若元素被销毁，应手动
URL.revokeObjectURL(url)； - 不要一次性加载全部字体，按需注册（例如用户从下拉菜单选择某字体时再加载）；
-
font-display: swap可避免 FOIT（字体阻塞渲染），提升编辑器响应感。
三、与富文本编辑深度集成
原始 DOM 编辑（如 contenteditable）本身不处理字体元数据，需自行维护格式状态：
- 使用
getComputedStyle(el).fontFamily读取当前段落字体，但返回值可能是逗号分隔列表（如"MyFont, sans-serif"），需提取首个有效自定义字体名； - 推荐为每个编辑节点添加
data-font-src="local"属性，区分本地字体与 web 字体/系统字体； - 结合
document.execCommand()已过时，应改用Selection+Range+DocumentFragment手动包裹<span></span>并设置style.fontFamily，确保样式精准作用于选区； - 若需导出为 PDF 或打印，务必提前预加载所有用到的本地字体 blob，否则导出时字体回退。
例如应用字体到选区：
function applyLocalFontToSelection(fontName) {
const sel = window.getSelection();
if (!sel.rangeCount || !fontName) return;
const range = sel.getRangeAt(0);
const span = document.createElement('span');
span.style.fontFamily = `"${fontName}"`;
span.textContent = range.toString();
range.deleteContents();
range.insertNode(span);
}
本质上，Local Fonts Access 不改变 DOM 编辑逻辑，而是补全了「字体供给链」的最后一环：从「知道有这个字体」，到「真正把它用起来」。它让浏览器编辑器第一次具备接近桌面软件（如 Figma、Affinity Publisher）的字体控制粒度。
不复杂但容易忽略。
