在渲染网页之前等待字体加载

Question

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

原文由 wheresrhys 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

首先你的@font 在哪里声明？它是嵌入到您的 HTML 中，在页面上的 CSS 表中声明，还是（希望）在外部 CSS 表中声明？

如果它不在外部工作表中，请尝试将其移动到一个（通常这是更好的做法）。

如果这没有帮助，您需要问自己，秒差的分数是否真的对用户体验有很大的不利影响？如果是，那么请考虑 JavaScript，您可能可以做一些事情，重定向、暂停等，但这些实际上可能比最初的问题 _更糟糕_。对用户来说更糟，维护也更糟。

此链接可能会有所帮助：

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

原文由 Tom Gullen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于没有人提到这一点，我相信这个问题需要更新。我设法解决问题的方法是使用现代浏览器支持的“预加载”选项。

以防有人不需要支持旧浏览器。

 <link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

一些包含更多详细信息的有用链接：

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content http://www.bramstein.com/writing/preload-hints-for-web-fonts.html

原文由 Thiago C. S Ventura 发布，翻译遵循 CC BY-SA 4.0 许可协议