这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 扩展程序中使用它。知道为什么这不起作用吗？
最佳答案
绘制到 Canvas 会立即发生，但浏览器必须从服务器加载字体。因此，当您在 Canvas 上绘制时，字体尚未准备好，因此默认为默认字体。
您可以在页面上创建一个强制加载字体的元素。
<div style="font-family:test;display:none"></div>
关于javascript - @font-face 无法正常工作的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18318896/