fonts - css等待加载网页前加载字体

  显示原文与译文双语对照的内容
150 2

我使用 @font-face 在我的网站中嵌入字体。 首先,文本呈现为系统默认值,然后( 一旦字体文件加载了大概)的正确字体呈现一秒之后的分数。 通过延迟页面呈现,直到字体加载或者类似的字体被加载或者类似时,才能减少/。

时间: 原作者:

77 4

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

首先你的@font 在哪里声明? 是 inline 对你的HTML,在页面上的CSS表中声明,或者在外部CSS表中声明的( 希望)?

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

如果这不能帮助你,你需要问自己,第二个差异真的很有利于用户体验。 在这个过程中,你可能会有一些事情可以做,如重定向。暂停等等,但这些可能比原来的问题更糟。 对于用户来说更糟糕,而且维护更糟糕。

这里链接可能会帮助:

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

原作者:
101 5

Edit: 最好的方法可能是为你的字体 base64编码。 这意味着你的字体必须在你的HTML被解析和显示的时候完全加载。 你可以通过单击"专家",然后单击"base64编码"squirrel https://www.fontsquirrel.com/tools/webfont-generator的字体webfont来完成这里操作。 这就是TypeKit这样服务的工作方式。

原始答案: 另一种检测字体是否加载的方法是使用 FontLoader https://github.com/smnh/FontLoader 或者复制它们的策略。

在浏览器中,它们绑定到滚动事件,因为当字体加载时,将调整文本的大小。 它使用两个包含 div ( 当高度改变时将滚动) 和 IE的单独回退。

另一种方法是使用 setInterval 定期检查 DOM,但是使用javascript事件要快得多。

显然,你可以能会做类似于设置 body的不透明度,然后在字体加载后显示它。

原作者:
...