Web字体在加载时闪烁

Question

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

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

我们使用fonts.com字体.

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

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

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

Answer 1

我以前也遇到过这种情况，我按照以下两个步骤进行：

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

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

Answer 2

您可能会看到所谓的FOUC（未样式化内容的闪烁）。这是一个常见的问题。我想您可以尝试使用Web字体加载器来更好地控制字体加载。

Answer 3

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

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

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

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

保罗·爱尔兰（Paul Irish）在美好的时光里有一篇很好的文章：http : //www.paulirish.com/2009/fighting-the-font-face-fout/