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

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

正如此链接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（有关这些建议的进一步说明，请参阅链接）。