如何在 React 中确保 Canvas 渲染前正确加载自定义字体

react 组件中 canvas 使用自定义字体（如 ‘great vibes’）时，常因字体未就绪导致回退到系统默认字体；本文提供一种轻量、可靠且无需第三方库的预加载方案——通过隐藏 dom 元素强制触发字体加载。

在 react 应用中使用 绘制带自定义字体的文本（例如 context.font = “56px ‘Great Vibes’, cursive”）时，一个常见却容易被忽视的问题是：字体资源尚未完成加载，canvas 上下文已执行 fillText()。此时浏览器会静默降级为系统默认 cursive 字体（如 Comic Sans），即使 css 中已通过 @font-face 正确声明——因为 canvas 的 measureText() 和渲染行为不等待字体加载完成，也不触发 fontload 事件。

你当前代码中的 useEffect 在图像加载完成后立即调用 draw()，但此时 ‘Great Vibes’ 极可能仍处于网络请求或解析阶段，导致首次渲染失败，仅刷新页面后才显示正常（此时字体已缓存）。

✅ 推荐解决方案：主动“预热”字体
利用浏览器渲染引擎的特性——只要某元素的 font-family 被计算并参与布局（哪怕内容为空、位置隐藏），浏览器就会触发该字体的加载。我们无需监听 document.fonts.load() 或引入复杂状态管理，只需在 Canvas 同级插入一个极小、不可见但明确声明目标字体的 DOM 元素：

   {/* 关键：强制加载 Great Vibes 字体 */}   
     AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpqqRrSsTtUuVvWwXxyyZz   
     

? 为什么这样有效？

• fontFamily 值与 Canvas 中使用的完全一致（注意引号匹配：’Great Vibes’），确保字体族名精确对应 @font-face 定义；
• text-transparent + overflow-hidden + w-0 h-0 彻底隐藏内容，不影响布局与可访问性；
• aria-hidden=”true” 明确告知屏幕阅读器忽略该元素；
• 插入位置在 Canvas 外层容器内，保证与 Canvas 渲染处于同一渲染上下文，字体加载状态全局共享。

⚠️ 注意事项与增强建议

• CSS 中必须正确定义 @font-face：确保 ../fonts/fonts.css 包含类似以下声明（路径、格式、font-display: swap 推荐）：

  @font-face {   font-family: 'Great Vibes';   src: url('../fonts/GreatVibes-Regular.woff2') format('woff2'),        url('../fonts/GreatVibes-Regular.ttf') format('truetype');   font-weight: normal;   font-style: normal;   font-display: swap; /* 关键：避免阻塞渲染，同时允许重绘 */ }

• 避免仅依赖 font-display: block：它会导致字体在加载完成前完全不可见（空白），而 swap 可让 Canvas 首次绘制用 fallback，待字体加载后自动重绘（但 Canvas 不自动重绘！所以预热仍是必需的）；
• 进阶可选：结合 document.fonts.load()（适用于需严格同步场景）：

  useEffect(() => {   const loadFont = async () => {     try {       await document.fonts.load("56px 'Great Vibes'");       // 字体就绪，可安全触发 draw     } catch (e) {       console.warn("Font load failed, using fallback");     }   };   loadFont(); }, []);

  但注意：document.fonts.load() 在部分旧浏览器中不支持，且需配合 Canvas 重绘逻辑，而“预热 DOM 元素”方案兼容性更好、零依赖、更简洁。

总结：Canvas 字体加载问题本质是渲染时机与资源加载异步性不匹配。通过一个隐藏的、声明了目标字体的 DOM 元素，我们巧妙地将字体加载“绑定”到 React 组件挂载流程中，无需修改 Canvas 逻辑、不增加额外状态、不引入竞态风险——这是兼顾可靠性、简洁性与兼容性的最佳实践。