Javascript @字体无法正常工作问题

这再现了这个问题

我有一个自定义字体，我使用@font-face导入它。最初我想在中使用它，但它不起作用

ctx.font = "16px test";

然后我发现外面的效果不太好

@字体{ 字体系列：测试； src:url'http://example.com/iLiHei.ttf'; } 习俗{ 字体系列：test，monospace； } 字体文件本身就是问题所在吗？因为我在CSS中看不到任何错误

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

---

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

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

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

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

---

只是试图复制这个问题，事实上，它并没有显示出单空间以外的东西。但也难怪，这个字体文件应该是21mb左右！在某些情况下，它有时只是关闭连接，只留下部分下载的文件，或者需要很多时间才能渲染

你真的想让页面加载依赖于这么大的字体文件吗？

---

最好的建议是找一个更好的字体文件，尺寸更小。

我实际上在chrome扩展中使用它，所以大小并不重要。一切都可以立即下载；另外，我还有一种更大的字体，但奇怪的是，这种字体确实有效。加载文本时，我不会自动绘制文本，而且因为文件本身就在它立即加载的扩展名中。无论如何，谢谢你的回答。浏览器控制台中没有错误，但在Firefox的传统错误控制台中，我可以看到Firefox拒绝解析此文件，因为其中一个表中存在一些问题：错误：可下载字体：表“GDEF”：解析表失败。。。