Web字体在加载时闪烁

Question

我们有一个网站 - 一切正常，但网页字体在页面加载前闪烁一瞬间闪烁。

这似乎不会发生在其他网站上，我看不出任何差异。

我们使用fonts.com字体。

我在谷歌上找到的所有内容都是Firefox的问题 - 但这种情况在我所有的浏览器中都会发生。

例如http://lpff.niico.co.uk/About/Who-We-Are/Our-People

有没有明显我错过的东西？我怎样才能解决这个问题？

Answer 1

有几种方法可以解决这个问题。

1 - 由于您从网站上提取字体并且您没有在您自己的服务器上本地托管字体，因此页面加载与fast.fonts.net的字体加载之间存在延迟。

如果你下载字体（.ttf）并通过fontsquirrel的webfont生成器运行它，它应该提升一些加载问题。

2 - 由于页面加载时仅闪烁几秒钟，因此您可以在字体加载（200毫秒）时短暂隐藏网页内容。这将确保当您的页面内容加载时，您的用户看不到闪烁。

Paul Irish在好日子里有一篇关于这个的好文章：http://www.paulirish.com/2009/fighting-the-font-face-fout/

Answer 2

你可能正在看到所谓的FOUC (flash of unstyled content)。这是一个常见问题。我想你可以尝试使用web font loader来更好地控制字体加载。

Answer 3

一个很好的库解决了我同步加载字体的问题是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>