document.fonts.ready 不是加载触发器而是就绪通知器，需先确保 @font-face 已声明并调用 document.fonts.load() 触发加载，再等待其 promise 解析，否则会永久 pending。
document.fonts.ready 不是“加载触发器”，只是“就绪通知器”
很多人一上来就 await document.fonts.ready，结果页面卡住不动——它不会主动下载字体，只对已声明且已开始加载的 @font-face 生效。如果 CSS 里没写 @font-face，或者写了但没被浏览器解析（比如动态插入后没触发重排），document.fonts.ready 就永远 pending。
正确顺序是：先确保 @font-face 已在 HTML 或 style 标签中静态声明 → 触发一次字体使用（比如给某个元素设 font-family: 'MyFont'）→ 再调用 document.fonts.load() 显式请求加载 → 最后等 document.fonts.ready。
-
@font-face必须包含font-display: swap，否则首屏会白屏，用户根本等不到 ready - 动态插入的
@font-face规则（比如编辑器里切换字体时注入）需手动触发一次样式重计算，例如getComputedStyle(document.body).fontFamily - 若字体文件 404 或 CORS 失败，
document.fonts.ready仍会 resolve，但实际字体不可用——得靠document.fonts.check()配合document.fonts.load()的 reject 判断失败
怎么写一个可靠的字体就绪等待函数
别直接 await document.fonts.ready，要封装成带超时和 fallback 的逻辑。核心是：先 load()，再等 ready，同时监控是否真能渲染。
示例：
async function waitForFont(fontDesc) {
try {
await document.fonts.load(fontDesc);
await document.fonts.ready;
// 额外验证：检查是否真能渲染（避免 CORS 静默失败）
if (!document.fonts.check(fontDesc)) {
throw new Error('Font failed to load or parse');
}
} catch (e) {
console.warn('Font load failed:', e);
// 可降级到 fallback 字体或显示 loading 提示
}
}
// 调用时必须传完整描述，如：
waitForFont("400 16px 'Inter'");
-
fontDesc必须匹配@font-face中的font-family、font-weight、font-style，大小写敏感，字体名带单引号 - 字号用
16px即可，不需匹配实际使用尺寸，关键是让它命中某条@font-face规则 - 超时控制建议加在外部 Promise.race 里，因为
document.fonts.ready本身不提供 timeout
编辑器预览区渲染前，必须避开三个常见时机陷阱
HTML 编辑器常把预览 iframe 或 div 当作“独立环境”，但字体加载状态不继承——父页的 document.fonts 和预览区的不是同一个实例。
- 预览区是 iframe？必须在 iframe 的
contentDocument上重复声明@font-face并调用其自身的document.fonts.load() - 预览区是动态 innerHTML？每次更新都要重新触发字体加载检测，不能只在 mounted 时跑一次
- 用了 Vue/React？组件
mounted或useEffect触发时，CSS 可能还没注入完成，得加微任务延迟或监听style.sheet.cssRules.length
最稳做法：每次预览内容变更后，先清空预览容器，插入含 @font-face 的 style 标签，再插入 HTML，最后执行 waitForFont()，成功后再 innerHTML = previewHTML。
Canvas 绘图前也得等字体就绪，但 API 调用位置很关键
编辑器里常把预览转成 Canvas 图片导出，这时候如果字体没就绪，ctx.fillText() 会静默回退到默认字体，且无报错。
- 必须在 Canvas
getContext('2d')后、绘图前，同步 等待document.fonts.ready（注意：不是预览区的 document，而是当前上下文的 document） - 如果 Canvas 在 iframe 里，同样要操作 iframe 内的
document.fonts - 不要依赖
window.onload或DOMContentLoaded，它们和字体加载无关；也不要只靠font-display: swap，它只管渲染，不管 Canvas 绘图用的字形数据
真正复杂的是多字体场景：比如预览里混用 Inter、Noto Sans SC、JetBrains Mono，就得逐个 load()，再统一等 ready，中间任一失败都可能让导出图片字体错乱——这点容易被忽略，但直接影响交付质量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
