CSSCanvas字体加载监听技巧

在CSS Canvas绘图中，直接设置`ctx.font`后立即调用`fillText()`极易因字体未真正就绪而静默降级到默认字体，造成难以排查的显示异常；关键在于区分“资源加载完成”与“字体完全就绪”——`FontFaceSet.load()`仅触发下载，不保证解析和注册，而`document.fonts.ready`才是唯一可靠的信号，它会在字体完成加载、解析、注册并纳入渲染管线后才resolve；正确做法是将Canvas绘图逻辑封装为异步函数，显式等待`document.fonts.ready`（或兼容旧浏览器的轮询兜底方案）后再执行，同时注意字体需提前通过`@font-face`声明或`document.fonts.add()`注册，否则就绪等待将无效——这一细节正是保障多端一致、高质量文字渲染的核心防线。

FontFaceSet.load() 能否阻塞 Canvas 绘图？不能，但可主动等待

直接调用 ctx.font = "24px 'Noto Sans SC'" 后立刻 fillText()，若字体尚未就绪，Canvas 会回退到默认字体（如 sans-serif），且不报错、不重绘——这是最隐蔽的“字体失效”。FontFaceSet.load() 返回 Promise，但它只保证字体资源加载完成，**不保证浏览器已将该字体纳入可用字体集缓存**。必须配合 document.fonts.ready 或显式检查 status。

• FontFaceSet.load() 是“触发加载”，不是“等待就绪”；它 resolve 时字体可能仍在解析或未注册进渲染管线
• 真正可靠的就绪信号是 document.fonts.ready Promise，它在所有待加载字体完成加载+解析+注册后才 resolve
• 若只加载单个字体，也可用 document.fonts.check('24px "Noto Sans SC"') 轮询，但不如 ready 简洁

如何用 document.fonts.ready 安全触发 Canvas 绘图

关键不是“监听”，而是“等待就绪后再执行绘图逻辑”。把 Canvas 渲染封装成函数，等 document.fonts.ready resolve 后再调用：

<code>async function drawWithCustomFont() {
  // 确保字体已声明（CSS 中 @font-face 或 JS 中 new FontFace）
  const font = new FontFace('Noto Sans SC', 'url(/fonts/NotoSansSC-Regular.woff2)');
  document.fonts.add(font);
<p>// 等待字体真正就绪（含加载、解析、注册）
await document.fonts.ready;</p><p>const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '24px "Noto Sans SC"';
ctx.fillText('你好，Canvas！', 50, 50);
}</p><p>drawWithCustomFont();</p></code>

• 必须先 document.fonts.add()，否则 document.fonts.ready 不会等待该字体
• 若字体已在 CSS 中通过 @font-face 声明，可跳过 add()，但需确保 CSS 已加载（如放在 ）
• await document.fonts.ready 是最简方式；不要用 document.fonts.onloadingdone，该事件已被废弃

为什么 ctx.font = '...' 后立即 fillText() 仍可能失败

Canvas 的字体匹配发生在绘制帧提交时刻，而非设置 ctx.font 时。即使字体文件已下载完，浏览器也可能因排版引擎未完成字体元数据解析而临时降级。这种降级不可逆——同一帧内多次 fillText() 都会用降级字体，除非强制触发新帧（如 requestAnimationFrame）。

• 常见错误：在 DOMContentLoaded 里设置字体 + 绘图，但此时 document.fonts.ready 尚未 resolve
• 更隐蔽的问题：字体文件返回 200 但内容损坏，document.fonts.load() 仍 resolve，但 document.fonts.ready 会拒绝（reject），需加 catch
• 移动端 WebKit（iOS Safari）对 document.fonts.ready 支持稳定，但旧 Android WebView 可能无此 API，需降级为定时轮询 check()

兼容性与兜底方案：旧浏览器如何处理

IE 和部分 Android 4.x WebView 不支持 document.fonts。检测后应降级为超时+轮询，避免无限等待：

<code>function waitForFont(fontDesc, timeout = 3000) {
  if ('fonts' in document) {
    return document.fonts.ready;
  }
  return new Promise((resolve) => {
    const start = Date.now();
    const check = () => {
      if (document.fonts.check(fontDesc)) {
        resolve();
      } else if (Date.now() - start > timeout) {
        resolve(); // 超时也继续，避免卡死
      } else {
        setTimeout(check, 100);
      }
    };
    check();
  });
}
<p>// 使用
waitForFont('24px "Noto Sans SC"').then(() => {
ctx.font = '24px "Noto Sans SC"';
ctx.fillText('你好', 50, 50);
});</p></code>

真正容易被忽略的是：字体加载状态和 Canvas 渲染上下文生命周期无关。如果用户切换标签页再切回，或设备休眠唤醒，字体缓存可能失效，但 Canvas 不会自动重绘——这类场景需要监听 visibilitychange 并重新触发就绪检查。

本篇关于《CSSCanvas字体加载监听技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！