html - 即使使用 Web 字体加载器，如何避免 Flash of Unstyled Text (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

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

Here