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。
您需要将字体粗细设置为较高的值（例如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>

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

1 个答案: