html字体加载规则,CSS-等待字体加载，然后渲染网页

CSS-等待字体加载，然后渲染网页

我正在使用@ font-face将字体嵌入到我的网站中。 首先，文本将作为系统默认值呈现，然后(假定字体文件已加载)正确的字体将在几分之一秒后呈现。 有没有一种方法可以通过延迟页面渲染直到加载字体或类似字体之后来最小化/消除此延迟。

9个解决方案

17 votes

这取决于浏览器的行为方式。

首先，您的@font在哪里声明？ 它是内联到HTML，是在页面上的CSS表中声明，还是(希望)在外部CSS表中声明？

如果不在外部工作表中，请尝试将其移动到一个工作表中(通常还是最好的做法)。

如果这样做没有帮助，您需要问自己：秒差的一小部分是否真的对用户体验造成重大损害吗？ 如果是这样，请考虑使用JavaScript，您可能可以执行一些操作，重定向，暂停等操作，但实际上这些操作可能比原始问题更糟糕。 对用户来说更糟，维护起来更糟。

该链接可能会有所帮助：

[http://paulirish.com/2009/fighting-the-font-face-fout/]

Tom Gullen answered 2020-01-20T05:09:21Z

15 votes

编辑：最好的方法可能是对字体进行base64编码。 这意味着在解析和显示HTML之前，必须完全加载字体。 您可以通过单击“专家”，然后单击“ base64编码”，使用字体squirrel的webfont生成器[https://www.fontsquirrel.com/tools/webfont-generator]进行此操作。 这就是TypeKit之类的服务的工作方式