Question

这是我的字体：
@font-face {font-family: "myicon";/*...*/}
我在css中的图标内容为：content: "\e000";
我的Js代码：
ctx.font = '13.5pt myicon'; ctx.fillText("\ue000",90, 101); //not working

你能解释一下我的问题在哪里吗？为什么不打印图标？（抱歉我的英语不好）

Answer 1

虽然您可以使用一个标记提及的脚本，但您也可以粘贴一个等待加载字体的小片段。

脚本将通过执行以下操作进行测试：

创建内部画布，为其绘制默认字体并存储其像素
尝试按间隔设置所需的字体，绘制并提取其像素
如果像素级别没有差异，请等待更多
在第一个像素差异处，我们加载了一个新字体（推测）
如果超时（此处为3秒），则会调用错误回调

一个实例：

hasFont("Open Sans", function() {
  document.body.innerHTML += " OK<br>Loading font..."

  // unknown font:
  hasFont("xFontoY", function() {
    document.body.innerHTML += " OK"
  }, function() {
    document.body.innerHTML += " Not loaded"
  });
  
}, function() {
  document.body.innerHTML += " Not loaded"
});

function hasFont(fontName, callback, error) {

  var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d"),
      w = 60, h = 20,                             // affects accuracy
      delay = 50, maxTests = (1000 / delay) * 3,  // 3 sec @ 50ms intervals
      initial = getPixels("sans-serif");
  
  canvas.width = w; canvas.height = h;

  // test
  (function test() {
    var px = getPixels(fontName), len = px.length, i = 0;
    for(; i < len; i++) {
      if (initial[i] !== px[i]) {callback(fontName);return}
    }
    
    if (--maxTests) setTimeout(test, delay);
    else {if (error) error(fontName)}
  })();
  
  function getPixels(fontName) {
    ctx.clearRect(0, 0, w, h);
    ctx.font = h + "px " + fontName + ", sans-serif";
    ctx.fillText("aWm", 0, h);
    return new Uint32Array(ctx.getImageData(0, 0, w, h).data.buffer);
  }
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
canvas {border:1px solid #000}

Loading font...

随意重写它以获取选项，承诺等。

Answer 2

外部字体（如图像）是异步加载的。

所以你试图在字体完全加载之前使用它。

有很多脚本可以做到这一点。一个好的是TypeScript的WebFontLoader：

https://github.com/typekit/webfontloader#events

我如何写＆＃34;上下文画布中的图标？

2 个答案: