Question

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

这似乎不会发生在其他网站上。我看不出有任何区别。

我们使用fonts.com字体。

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

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

我错过了一些明显的东西吗？我该如何解决这个问题？

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

之前发生在我身上，我经历了以下两个步骤：

1- 使用预加载：在你的标题中你可以添加这个

 <link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin ></link>

确保 href 路径和扩展名正确无误。通过预加载，您的字体将在其他资产之前开始下载，这将提高不出现闪烁的机会，但这可能还不够，具体取决于您的网络字体是否太重。

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 而不是回退。您可以查看此属性here 不建议这样做，因为如果下载失败，您将无法显示您的站点，但如果优先考虑闪烁，那么它会有所帮助。

来源：https://web.dev/optimize-webfont-loading/

Answer 4

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>

Web字体在加载时闪烁

4 个答案: