如何在 html 5 画布上使用 FontAwesome 图标

Question

我在 HTML 5 画布中使用 FontAwesome 图标时遇到问题，我试过这个：

ct.fillStyle = "black";
ct.font = "20px Font Awesome";
ct.textAlign = "center";

var h = 'F1E2';

ct.fillText(String.fromCharCode(parseInt(h, 16)), x, y);

我尝试导入 FontAwesome CSS 文件，但没有成功！有人可以帮我解决这个问题吗？

谢谢！

Answer 1

• 首先，如果您使用的是 FA5，请使用Font Awesome 5 Free. 如果您使用的是 FA4，则只需使用FontAwesome.
• 您需要将 font-weight 设置为一个较高的值（如 600）。

例子：

var ctx = canvas.getContext("2d");
document.fonts.ready.then(_ => {
  ctx.font = '600 48px "Font Awesome 5 Free"';
  ctx.fillStyle = "black";
  setTimeout(_ => ctx.fillText("\uF200", 45, 45), 200);
});

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
canvas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
}

<canvas id="canvas"></canvas>