Question

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

但是，即使使用此fontloader，文本仍会闪烁。页面加载默认字体，然后一旦webfontloader说字体已加载，CSS就会被触发使用加载的字体，但仍会导致文本闪烁...例如，请参阅codepen。无论何时硬盘刷新并且需要加载字体，文本都会闪烁。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我能做些什么来避免这种闪烁吗？这是一种糟糕的用户体验。

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

然后在文档的末尾添加body标记之前的javascript标记。

包含在文件中

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

似乎在为我工作，因为我遇到了同样的问题。可以使用setTimeout的时间来优化最后的数字（以毫秒为单位）。您也可以在其上添加过渡效果，使其淡入淡出，还可以添加will-change:auto;或will-change:filter;，但我会让您迷惑不解，看看有什么适合您的。忘记提及您需要在HTML标记的style="filter:opacity(0);"上添加h1。

如何使用Web Font Loader避免使用无格式文本Flash（FOUT）？

3 个答案: