react 组件中 canvas 使用自定义字体（如 'great vibes'）时，常因字体未就绪导致回退到系统默认字体；本文提供一种轻量、可靠且无需第三方库的预加载方案——通过隐藏 dom 元素强制触发字体加载。
在 React 应用中使用 <canvas> 绘制带自定义字体的文本（例如 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 元素：
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 2 }}
>
{/* 关键：强制加载 Great Vibes 字体 */}
<div
style={{ fontFamily: "'Great Vibes', cursive" }}
className="absolute -left-10 -top-10 w-0 h-0 overflow-hidden text-transparent"
aria-hidden="true"
>
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
</div>
<canvas
ref={canvasRef}
height={height}
width={width}
className="rounded-xl mx-auto w-10/12"
/>
</motion.div>? 为什么这样有效？
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 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 逻辑、不增加额外状态、不引入竞态风险——这是兼顾可靠性、简洁性与兼容性的最佳实践。
