我们有一个网站-一切正常，但在页面加载前，Web字体会闪烁一下。
期望的行为是不闪烁。
在其他站点上似乎没有这种情况，我也找不到任何区别。
我们正在使用fonts.com字体。
在谷歌上我只能找到Firefox的问题-但这对我来说在所有浏览器中都发生。
我错过了什么明显的东西吗？我该如何解决这个问题？
4个回答
8
有几种方法可以解决这个问题。
1 - 由于您是从网站中获取字体而不是将字体托管在自己的服务器上，因此在页面加载和从fast.fonts.net加载字体之间存在延迟。
如果您下载字体（.ttf）并通过fontsquirrel的Webfont生成器运行它，应该可以解决一些加载问题。
2 - 由于页面加载时只会闪烁几秒钟，您可以在字体加载时隐藏网页内容的短暂时间（200毫秒）。这将确保当您的页面内容加载时，用户不会看到闪烁。
Paul Irish撰写了一篇关于此的文章：http://www.paulirish.com/2009/fighting-the-font-face-fout/
- Mathias Rechtzigel
5
2谷歌翻译：
这两个选项都不是很好（1可能是非法的）-似乎仍然是一个未解决的问题？！百度翻译：
这两个选项都不是很好（1可能是非法的）-似乎仍然是一个未解决的问题？！ - niico
1有趣的文章。现在 WebKit 是否已经改为 Firefox 的方法，因为 Chrome 有这个问题了。 - niico
@niico 另外，你的浏览器是否设置为自动清除缓存？闪烁通常在第一次后不会影响用户，因为字体将被缓存，加载速度会比调用fast.fonts.net api更快。 - Mathias Rechtzigel
2不，它没有设置清除缓存 - 即使在我最近访问过的页面上仍然会闪烁。 - niico
虽然这是一个好的答案，但现在不应该再被接受了。请查看这个答案。 - connexo
6
我曾经遇到过这种情况，我通过以下两个步骤解决了问题：
1- 使用预加载: 在头部添加以下代码
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin ></link>
确保 href 路径和扩展名正确。
使用预加载，可以在其他资源之前开始下载字体，从而提高防止闪烁的机会，但如果您的 Web 字体过于繁重，则可能不够。
2- 使用 font-display:fallback 属性。
该属性会在加载时阻止短时间内显示文本，如果超过了这个时间还没有加载，它就会切换到默认字体。
例如：
@font-face {
font-family: ExampleFont;
src: url(/path/to/fonts/examplefont.woff) format('woff'),
url(/path/to/fonts/examplefont.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
如果这一切都做了，你的字体加载时间更长，并且你不想出现闪烁，那么你可以设置
font-display: block，而不是使用回退。你可以在这里了解有关此属性的更多信息。尽管这不被推荐，因为如果下载失败，则无法显示您的网站，但如果闪烁是优先考虑的问题，则可以发挥作用。
来源：https://web.dev/optimize-webfont-loading/
- Makogo12
1
我想补充一点，检查与字体和样式相关的
Cache-Control头部。在最好的情况下，你可以允许这些资源在浏览器中缓存一段合理的时间，这样你的网站加载时间将大大提高。 - undefined0
一个很好的库解决了我同步加载字体的问题，它是https://github.com/typekit/webfontloader。
使用起来非常简单：
使用起来非常简单：
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>
- Tiago Silva Pereira
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接