如何在画布中绘制fontawesome(版本> = 5.0)？

Question

我想在画布上绘制fontawesome图标.

以下是我的代码:

<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>

我已导入字体文件并将其链接.但它不起作用: 它只显示一个空的矩形.

你能告诉我为什么吗？

一个有趣的事情是,当我链接fontawesome版本4.5在线地址时它起作用:在这里输入链接描述

两个版本的区别在哪里？

Answer 1

除了@TanDuong正确的声明之外,你甚至需要将font-weight设置为900才能启动字体...

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>

Answer 2

在 Font Awesome 5 中，你应该使用

context.font = '48px Font Awesome 5 Free'

在 Font Awesome 4 中，你应该使用

context.font = '48px FontAwesome'

这是在FontAwesome上定义的。您可以搜索@font-face查看 Font Awesome 5 中定义的字体名称