javascript - 如何在 Canvas 中绘制 fontawesome(version >=5.0)？

Question

我想在 Canvas 上绘制精美的图标。

下面是我的代码:

<canvas id="canvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>

<script>
    var content = '\uF006';
    var context = document.getElementById('canvas').getContext('2d');
    context.font = '48px Material Design Icons';
    context.fillText(content, 100, 100);
    context.strokeText(content, 100, 100);
</script>

我已经导入了字体文件并链接了它。但它不起作用: it just show a rectangle which is empty.

你能告诉我为什么吗？

一件有趣的事情是，当我链接 fontawesome 4.5 版在线地址时它可以工作:enter link description here

两个版本有什么区别？

Answer 1

除了@TanDuong 的正确声明之外，您似乎甚至需要将字体粗细设置为 900 才能让字体生效...

另请注意 Chrome 76+现在要求字体为 explicitly loaded ，或者文档中存在使用该字体的字符之一(不再可能通过 CSS 仅针对 Canvas )。

const ctx = c.getContext("2d");
const font = '900 48px "Font Awesome 5 Free"';
// Chrome 76+ won't load the font
// until it's needed by the ducument (i.e one of the characters is displayed)
// or explicitely loaded through FontFaceSet API.
document.fonts.load(font).then((_) => {
  ctx.font = font;
  ctx.fillStyle = "red";
  // note that I wasn't able to find \uF006 defined in the provided CSS
  // falling back to fa-bug for demo
  ctx.fillText("\uF188", 50, 50);
})

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

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