如何在画布上绘制fontawesome（version> = 5.0）？ [英] how to draw fontawesome(version >=5.0) in 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>

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

I have imported the font files and linked it. But it doesn't works: it just show a rectangle which is empty.

您能告诉我为什么吗？

其中的区别在两个版本之间？

where the difference between the two version?

推荐答案

除了@TanDuong正确语句外，似乎您甚至需要将font-weight设置为900以插入字体...

In addition to @TanDuong correct statement, it seems you even need to set the font-weight to 900 for the font to kick in...

还要注意， Chrome 76+ 现在要求字体为已显式加载，或者文档中存在使用该字体的字符之一nt（无法再通过CSS定位画布）。

Also note that Chrome 76+ now requires that the font is explicitly loaded, or that one of the characters using the font is present in the document (targeting only the canvas through CSS is not possible anymore).

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>

这篇关于如何在画布上绘制fontawesome（version> = 5.0）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！