即使使用 Web Font Loader，如何避免无样式文本 (FOUT) 的 Flash？

Question

我正在使用大约 100kb 的自定义字体。可以想象，浏览器文本正在从不可见文本闪烁到可见文本。因此我开始使用 webfontloader：https://github.com/typekit/webfontloader

但是，即使使用此字体加载器，文本仍会闪烁。页面使用默认字体加载，然后一旦 webfontloader 说字体已加载，CSS 就会被触发以使用加载的字体，但是，它仍然会导致文本闪烁......例如参见 codepen。每当您硬刷新并且需要加载字体时，文本就会闪烁。

https://codepen.io/anon/pen/LQGrpL

WebFont.load({
  custom: {
    families: ['Inter UI'],
    urls: ['https://rsms.me/inter/inter-ui.css']
  }
});

body,
button {
  font-weight: 400;
  font-size: 14px;
  font-family: sans-serif;
  font-style:  normal;
}

.wf-active body,
.wf-active button {
  font-weight: 400;
  font-size: 14px;
  font-family: 'Inter UI';
  font-style:  normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<h1>Hello World</h1>

<p>Good day to you...</p>

<button>Thank you</button>

有什么办法可以避免这种闪烁吗？这是一种糟糕的用户体验。

Answer 1

考虑试用 the Web Font Loader library，它提供了一个事件系统，允许您在加载字体时动态控制页面的外观。

Here

Answer 2

正如此链接https://binarapps.com/blog/fout-with-web-font-loader/ 中所指出的，您可以隐藏文本直到它准备好显示，如下所示：

body,
button {
   font-weight: 400;
   font-size: 14px;
   font-family: sans-serif;
   font-style:  normal;
   visibility: hidden;
}

.wf-active body,
.wf-active button {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Inter UI';
    font-style:  normal;
    visibility: visible;
}

您还可以在不透明度上添加一个过渡和一个仅在主体具有 .wf-loading 类时才可见的加载器（有关这些建议的进一步说明，请参见链接。

Answer 3

经过多年的折腾，我想出了这个：

在你的 css 文件中添加一个类：

.showMe {
  filter: opacity(1) !important;
  transition: filter 878ms ease-in;
}

然后在您的文档的最后添加一个 javascript 标记，就在结束 body 标记之前。

包含在文件中

setTimeout(function() {
  let h1 = document.getElementsByTagName('h1')[0];
  h1.classList.add('showMe');
}, 288);

似乎对我有用，因为我遇到了同样的问题。可以使用 setTimeout 的时间来优化最后的数字（以毫秒为单位）。 你也可以在上面添加一个过渡，让它更平滑地淡入并添加will-change:auto;或will-change:filter;，但我会让你乱来看看什么适合你。 忘了提到你需要在你的html标记中的h1上添加style="filter:opacity(0);"。

作为替代方案，您可以将 html 中的文本设置为不透明度 0，然后在页面完全加载后使用 .animate() api 慢慢淡入文本。