如何在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文件，但没有成功！有人能帮我解决吗？

谢谢！

- Gobli gaming

---

你是在本地下载了它还是尝试在线访问？本地：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself；在线：https://fontawesome.com/start - mdln97

Answer 1

• 首先，如果您正在使用FA5，请使用Font Awesome 5 Free。如果您使用的是FA4，则可以直接使用FontAwesome。
• 您需要将字体重量设置为较高的值（如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>

- JoshG

---

FA不是免费的字重吗？ - zer00ne

@zer00ne 实际上，这里有另一个回答证实了这一点：https://dev59.com/rFUL5IYBdhLWcg3wzq2a#49755090 - JoshG

@AndroidNoobie 谢谢，这很好知道。我一直认为900是荒谬的，但从未真正看到过任何区别。 - zer00ne

但是如果我们想要加载不同的类，比如 fas、far、fab 呢？我在网上找不到任何解决方案。 - Neo

@Neo far（Font Awesome Regular）需要pro订阅。如果您正在使用专业版，请将上面的font-family更改为Font Awesome 5 Pro。 - JoshG