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

Question

我想在画布上绘制字体图标。

下面是我的代码：

<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正确的语句之外，似乎您甚至需要将字体粗细设置为 900 才能使字体发挥作用......

另请注意，Chrome 76+ 现在要求显式加载字体，或者文档中存在使用该字体的字符之一(不再可能仅通过 CSS 定位画布(。

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

在字体真棒 5.你应该使用

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

在字体真棒 4.你应该使用

context.font = '48px FontAwesome'

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

Answer 3

WebFontLoader.js文件可以在网络上找到。