如何通过HTML的Local Font Access API枚举设备本地字体用于设计工具-html教程-PHP中文网

navigator.fonts.querylocalfonts()是chromium 125+桌面版支持的异步api，需用户手势触发、https环境及显式授权，返回字体元数据而非文件，须结合@font-face注入并监听document.fonts.load()确保渲染。

如何通过html的local font access api枚举设备本地字体用于设计工具

Local Font Access API 并不存在 —— 你真正要用的是 navigator.fonts.queryLocalFonts()，它只在 Chromium 125+（Chrome/Edge/Opera）桌面版中可用，且必须由用户点击触发、HTTPS/localhost 环境、显式授权。

怎么判断浏览器是否支持 `queryLocalFonts()`

不能靠 UA 字符串或版本号硬猜，得实测 API 存在性与权限状态：

'fonts' in navigator 且 'queryLocalFonts' in navigator.fonts 必须同时为 true，否则直接跳过
navigator.permissions.query({ name: 'local-fonts' }) 只能查当前权限状态（granted/denied/prompt），但不会触发弹窗；真正触发授权的是调用 queryLocalFonts() 的那一刻
移动端（包括 Android Chrome）、Firefox、Safari 全都不支持，检测失败时应静默降级，不要报错打断流程

为什么不能在页面加载时自动调用 `queryLocalFonts()`

因为这是受保护的权限，浏览器强制要求用户手势（如 click、keydown）触发，否则会抛出 NotAllowedError：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

常见错误：在 DOMContentLoaded 或 useEffect(() => {}, []) 中直接调用 → 立即失败
正确做法：绑定到按钮点击事件，例如 <button onclick="loadFonts()">加载本地字体</button>
即使用户之前授过权，首次调用仍需由用户操作发起；后续调用才可静默返回

拿到字体列表后，怎么安全用于 DOM 渲染

返回的是 FontMetadata 对象数组，只含元数据（family、fullName、postscriptName、weight 等），不提供字体文件本身。直接设 font-family 会 fallback 到系统默认字体：

必须配合 @font-face 注入：先调用 font.blob() 获取二进制，再用 URL.createObjectURL() 生成 blob URL，最后动态插入 <style></style>
weight 是数字（100–900），不是字符串 "bold"，做字重匹配时别用 === "bold" 这类比较
避免全局污染：不要把所有本地字体都注册进 CSS；建议按需加载，比如用户选中某款字体后再注入对应变体
缓存字体列表：用户可能中途安装新字体，提供“刷新”按钮比每次重请求更可控

最易被忽略的一点：字体注入后，document.fonts.load() 不保证立即可用，DOM 渲染可能仍用 fallback 字体；如需精确控制，得监听 document.fonts.onloadingdone 或用 await document.fonts.load(...) 确保加载完成再应用样式。