如何在Canvas中绘制FontAwesome（版本≥5.0）图标？

我来帮你排查下代码里的问题，你现在的代码有两个核心问题导致图标无法正常渲染：

1. 字体与Unicode字符不匹配 #

你使用的是FontAwesome的Unicode字符 \uF006（对应爱心图标），但代码里设置的字体却是 Material Design Icons——这两个字体的字符映射完全不兼容，浏览器找不到对应字符，自然显示不出来。你需要把字体名称替换为FontAwesome的正确字体名，比如：

• 免费版FontAwesome 6："Font Awesome 6 Free"
• 旧版FontAwesome 5："Font Awesome 5 Free"
• 如果是Pro版本，名称会对应为"Font Awesome 6 Pro"等

2. 未等待字体加载完成就绘制 #

浏览器加载字体需要时间，如果在字体还没加载完成时就调用fillText/strokeText，会自动 fallback 到默认字体，导致图标无法显示。必须确保字体就绪后再执行绘制逻辑。

修正后的完整代码示例 #

<canvas id="canvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
// 等待所有字体加载完成（或指定监听FontAwesome字体）
document.fonts.ready.then(() => {
  const heartIcon = '\uF006'; // FontAwesome Solid样式爱心的Unicode
  const ctx = document.getElementById('canvas').getContext('2d');
  
  // 注意：FontAwesome的Solid样式需要指定font-weight为900才能生效
  ctx.font = '900 48px "Font Awesome 6 Free"';
  
  ctx.fillText(heartIcon, 100, 100);
  ctx.strokeText(heartIcon, 100, 100);
});
</script>

额外注意事项 #

• 字体样式匹配：\uF006属于FontAwesome的Solid样式，需要搭配font-weight:900；如果是Regular样式的字符，需要对应font-weight:400，且确保你导入的字体文件包含该样式。
• 字体名称严格一致：代码里的字体名称必须和你CSS中@font-face定义的font-family完全相同，包括空格和引号（名称含空格时必须加引号）。比如你的CSS导入代码可能是：

  @font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('./fonts/fontawesome-webfont.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
  }
  

• 检查字体路径：确认字体文件的URL路径正确，浏览器能正常加载到字体资源（可以在开发者工具的Network标签里查看字体是否加载成功）。

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