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

在此处输入图像描述

顶行和底行应该使用不同的字体，但事实并非如此。

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

2 回答 2