HTML Canvas移动端无法显示粗体字体的问题排查与解决

原因 #

移动端Safari对Canvas字体的字重解析存在兼容性问题：当你使用sans-serif这类通用字体族时，系统默认的无衬线字体可能没有对应的粗体变体，或者Safari的Canvas渲染引擎在处理通用字体族的字重声明时，会自动忽略无法匹配的字重设置，最终 fallback 到常规字重（400），导致bold被丢弃。

解决方法 #

• 指定带粗体变体的具体字体族
  替换通用字体族为移动端系统支持的、明确包含粗体的字体，比如：

  ctx.font = "bold 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue";
  

  这些字体在iOS和安卓设备上都有对应的粗体版本，能确保字重生效。

• 使用字重数值替代关键字
  部分情况下，Safari对bold关键字的解析不如数值字重稳定，试试用700（bold对应的数值字重）替代：

  ctx.font = "700 12px sans-serif";
  

• 预加载粗体字体
  如果使用自定义字体，确保粗体字体加载完成后再设置Canvas字体，可借助FontFace API：

  const boldFont = new FontFace('CustomFont', 'url(fonts/custom-font-bold.woff2)');
  boldFont.load().then(() => {
    document.fonts.add(boldFont);
    ctx.font = "bold 12px CustomFont, sans-serif";
    // 执行绘制逻辑
  });
  

• 备选：模拟粗体（不推荐，仅应急）
  如果以上方法都无效，可以通过两次绘制文字（偏移1px）模拟粗体效果：

  ctx.fillStyle = '#000';
  ctx.font = "12px sans-serif";
  // 先绘制偏移的阴影层
  ctx.fillText('Hello', x+1, y);
  ctx.fillText('Hello', x-1, y);
  ctx.fillText('Hello', x, y+1);
  ctx.fillText('Hello', x, y-1);
  // 再绘制主文字
  ctx.fillText('Hello', x, y);
  

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