@ 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中看到任何错误。

  

顶行和底行应该使用不同的字体，但它们不是。

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

Answer 1

绘图到画布会立即发生，但浏览器必须从服务器加载字体。因此，当您绘制到画布时，字体尚未就绪，因此默认为默认字体。

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

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

Answer 2

只是试图复制问题，实际上它并没有显示除了monospace之外的东西。但难怪，该字体文件应该在21mb左右！在某些时候，它有时只是关闭连接并留下一个只部分下载的文件或需要很多时间才能呈现它。

你真的想让页面加载依赖于那么大的字体文件吗？ 最好的建议是找到一个更小的字体文件。