html - Web字体在加载时闪烁

Question

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

期望的行为是它不闪烁。

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

我们正在使用 fonts.com 字体。

我在谷歌上能找到的只是 Firefox 的问题——但这发生在我所有的浏览器中。

有什么明显的我错过了吗？我怎样才能解决这个问题？

Answer 1

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

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路径和扩展名正确。通过预加载，您的字体将在其他资源之前开始下载，这将提高不闪烁的机会，但根据您的 webfont 是否太重，这可能还不够。

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 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>