HTML Canvas自定义字体初始不渲染，仅刷新后加载问题求助

我之前在移动端开发时也碰到过一模一样的问题——首次加载页面时Canvas里的自定义字体死活不显示，刷新后就正常了。你试过的那几个方法没起效，大概率是没抓住字体加载时机和Canvas渲染时机不匹配这个核心问题，给你几个更精准的方案：

1. 用FontFace API主动控制字体加载流程 #

这是最可靠的方法，能确保字体完全加载完成后再渲染Canvas，从根源避免时机问题。示例代码如下：

// 定义自定义字体
const customFont = new FontFace('gotham-black', 'url(./path/to/gotham-black.ttf)');

// 加载并添加到文档字体库
customFont.load().then((font) => {
  document.fonts.add(font);
  // 字体加载完成后，再初始化/渲染Canvas
  initCanvas();
}).catch((err) => {
  console.error('字体加载失败:', err);
});

// 你的Canvas初始化渲染函数
function initCanvas() {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '24px gotham-black';
  ctx.fillText('测试自定义字体', 10, 50);
}

2. 监听document.fonts.ready事件 #

浏览器提供了document.fonts.ready这个Promise，它会在所有页面字体加载完成后触发。把你的Canvas渲染逻辑绑定到这个事件上，不用靠猜延迟时间：

document.fonts.ready.then(() => {
  // 这里执行Canvas文本渲染逻辑
  renderCanvasText();
});

3. 排查字体加载的潜在障碍 #

• 跨域限制：如果字体文件放在CDN或其他域名下，要确保服务器设置了正确的CORS响应头（比如Access-Control-Allow-Origin: *），移动端浏览器对跨域资源的校验更严格。
• @font-face声明准确性：确认font-family的名称和你在Canvas中使用的完全一致（注意大小写！部分移动端浏览器区分大小写），同时建议提供woff2、woff等多格式字体，覆盖更多设备。
• 字体文件加载状态：打开浏览器开发者工具的Network面板，检查字体文件的请求状态——如果是404或加载失败，那肯定无法渲染。

4. 让浏览器强制加载字体 #

你之前加的空div可能没起效，因为浏览器会认为空元素不需要渲染字体，从而跳过加载。可以改成带占位内容的隐藏元素，触发字体加载：

<div style="font-family:'gotham-black'; position:absolute; left:-9999px; visibility:hidden;">占位文本</div>

内容的提问来源于stack exchange，提问作者londonfed