javascript - @font-face 无法正常工作的问题

Question

这jsFiddle重现问题。

我有一个自定义字体，我使用了 @font-face导入它。本来想用在<canvas>但它不起作用。

ctx.font = "16px test";

然后我发现它在<canvas> 之外工作得不好.

@font-face {
    font-family: test;
    src: url('http://example.com/iLiHei.ttf');
}
#custom{
    font-family: "test", monospace;
}

是字体文件本身的问题吗？因为我在 CSS 中看不到任何错误。

The top row and the bottom row should be using different fonts but they are not.

我不关心不同的浏览器，因为我在 Chrome 扩展程序中使用它。知道为什么这不起作用吗？

Answer 1

绘制到 Canvas 会立即发生，但浏览器必须从服务器加载字体。因此，当您在 Canvas 上绘制时，字体尚未准备好，因此默认为默认字体。

您可以在页面上创建一个强制加载字体的元素。

<div style="font-family:test;display:none"></div>