我来帮你排查这个Canvas无法加载本地字体的问题，大概率是字体加载时机或者**@font-face配置细节**没处理好，咱们一步步来解决：

1. 先修正@font-face的配置细节 #

你的CSS代码有几个小问题，先调整一下：

@font-face {
  font-family: 'RifficFree-Bold';
  /* 先去掉local()避免系统字体干扰，确保优先加载本地文件 */
  src: url('./fonts/RifficFree-Bold.ttf') format('truetype');
  /* 补充字体权重，和字体本身属性匹配，避免调用时权重不兼容 */
  font-weight: bold;
}

• 路径检查：打开浏览器控制台的「Network」标签，刷新页面后看字体文件是否成功加载（状态码200），如果是404，说明./fonts/的相对路径不对，要根据HTML文件的位置调整（比如HTML在子文件夹的话，可能需要../fonts/）。
• 格式规范：url()最好加引号，format('truetype')要和url()用逗号分隔，之前的写法缺少逗号，可能导致浏览器解析异常。

2. 核心：等待字体加载完成再绘制Canvas #

Canvas不会自动等待字体加载，如果你在字体还没加载完成时就调用drawText，浏览器会直接用默认字体兜底。这里给你两种可靠的等待方式：

方式一：用FontFace API精准控制单个字体 #

// 初始化目标字体对象
const rifficFont = new FontFace('RifficFree-Bold', 'url(./fonts/RifficFree-Bold.ttf)');

rifficFont.load().then((loadedFont) => {
  // 将加载好的字体添加到文档可用字体列表
  document.fonts.add(loadedFont);
  // 字体就绪后再执行绘制逻辑
  drawText('你的测试文本', ctx);
}).catch((err) => {
  console.error('字体加载失败:', err);
});

方式二：等待所有字体加载完成 #

如果页面有多个自定义字体，用这个更省心：

document.fonts.ready.then(() => {
  // 所有@font-face定义的字体都加载完成了
  drawText('你的测试文本', ctx);
});

3. 检查Canvas的font属性写法 #

确保字体名称和@font-face里的font-family完全一致，并且格式正确：

function drawText(myText, ctx) {
  // 字体名称要和@font-face的font-family完全匹配，建议加引号避免特殊字符问题
  ctx.font = "40px 'RifficFree-Bold'";
  // 可选：补充文本对齐、填充颜色等属性，让显示效果更符合预期
  ctx.textAlign = 'center';
  ctx.fillStyle = '#000';
  ctx.fillText(myText, canvas.width/2, canvas.height/2);
}

注意：如果字体名称包含空格、特殊符号，必须用引号包裹，即使没有，加引号也能避免潜在的解析问题。

4. 快速排查小技巧 #

先在普通DOM元素上测试字体是否能生效，比如：

<div style="font-family: 'RifficFree-Bold'; font-size: 40px;">测试文本</div>

如果这个div能显示目标字体，说明@font-face配置没问题，问题出在Canvas的绘制时机；如果div也显示默认字体，那就是字体文件路径或者@font-face的配置错误。

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