javascript - 如何在 Canvas 元素上呈现来自 FontAwesome 的字形

Question

FontAwesome在其 CSS 文件中指定字形，如下所示:

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure 
    screen readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }

我正在尝试将图标从该字体渲染到 Canvas 元素，但看不到如何访问这些字形。

ctx.font = "40px FontAwesome";
ctx.fillText("\f000",20,20); // no cigar

如何在 JavaScript 字符串中指定这些字形？

Answer 1

你应该使用 String.fromCharCode :

ctx.fillText(String.fromCharCode("0xf000"), 20, 20);

或 Unicode 转义的语法:

ctx.fillText("\uf000", 20, 20);