Html 如何避免即使使用Web字体加载器也会闪现未样式文本（FOUT）？

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

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

WebFont.load({
自定义：{
族：['Inter-UI']，
网址：['https://rsms.me/inter/inter-ui.css']
}
});
body，
钮扣{
字体大小：400；
字体大小：14px；
字体系列：无衬线；
字体风格：普通；
}
.wf活动机构，
.wf活动按钮{
字体大小：400；
字体大小：14px；
字体系列：“Inter-UI”；
字体风格：普通；
}

你好，世界
祝你好运

谢谢
正如本链接所指出的，您可以隐藏文本，直到它准备好显示，如下所示：

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 load
类时才可见（有关这些建议的进一步解释，请参阅链接）。
经过多年的混乱之后，我想出了以下方法：

在css文件中添加一个类：

.showMe{
过滤器：不透明度（1）！重要；
过渡：过滤器878ms易于安装；
}

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

包括在文件中

setTimeout（函数（）{
设h1=document.getElementsByTagName（'h1'）[0]；
h1.classList.add（'showMe'）；
}, 288);

似乎是为我工作，因为我有同样的问题。可以使用setTimeout的计时来优化最后的数字（以毫秒为单位）。
您还可以在此基础上添加一个过渡，使其更平滑地淡入&还可以添加
将更改：auto或
将更改：过滤器h1
上添加
style=“filter:opacity（0）；”

作为替代方法，您可以在html中将文本设置为不透明度0，然后使用.animate（）命令api，以便在页面完全加载后缓慢淡入文本。
考虑试用
Web字体加载程序库，它提供了一个事件系统，允许您在加载字体时动态控制页面的外观

互联网上有很多关于这方面的文章，等等……与其使用超时，不如尝试“实验性”（但被广泛采用）字体加载API的事件--
878ms
这是一个奇怪的具体数字。链接是404，截止2020-06-02：如果帖子引用得更充分，这不会是一个问题对不起，我也应该添加带有转换的部分。如果我找到了正确的例子，我会编辑这篇文章，谢谢你指出这一点。