javascript - 从 Bootstrap 图标十六进制值输出一个符号

Question

我已经学会了如何检索 Bootstrap 图标值。

示例(带有 glyphicon-trash 图标):

html:

<div id="icon" class="glyphicon glyphicon-trash"></div>

js:

var iconSymbol = window.getComputedStyle($('#icon')[0], ':before').content;
var result = iconSymbol.charCodeAt(1).toString(16);
console.log(result);

之后结果是e020。

但之后我需要将这个符号绘制到canvas。

假设 value 是 e020，我使用下面的代码:

var label = String.fromCharCode(parseInt(value, 16));
var ctx = canvas.getContext("2d");
ctx.font = "52px Helvetica"
ctx.textAlign = "center"
ctx.fillStyle = "white"
ctx.fillText(label, pt.x, pt.y+4)

但在那之后我只有一个矩形符号。

我需要执行什么才能正确输出原始符号？可能是字体配置有问题，或者我必须尝试一些编码参数？

Answer 1

您需要使用与 Bootstrap 符号相同的字体，因为典型字体没有定义这些符号。 Helvetica 没有这些，并且在大多数情况下它可能会在任何情况下恢复为默认的无衬线字体，因为大多数用户没有安装 Helvetica。

看字体:

glyphicons-halflings-regular.*

在 fonts/ folder 中找到.将此字体设置为 Canvas ，然后绘制符号。您可能必须通过 DOM 预加载字体。