Question

我在推荐的Javascript参考中使用了Font-Awesome图标：

<script src="https://use.fontawesome.com/7c7031cd1a.js"></script>

当页面完成加载并显示图标时，当每个图标占据指定的宽度空间时，所有文本字符串和/或图标设置的元素都会显示为跳转到位。

有什么办法可以避免吗？感谢。

Answer 1

您所看到的被称为Flash of Invisible Text（或Flash of Unstyled Contents）。这是因为在下载外部字体之前呈现页面。然后，当下载并准备好图标字体时，页面将重新绘制。

可以 - 但不推荐（！） - 阻止整个页面显示，直到加载字体。您可以通过在加载字体时隐藏<html>来执行此操作。一旦它们到位，.fa-events-icons-loading类将被字体真棒脚本从<html>中删除，并且所有内容都会同时在浏览器窗口中绘制。

html.fa-events-icons-loading body {
    display: none;
}

您可以将This non-blocking example与this blocking version进行比较。效果不太明显，但第一个将首先显示文本，然后在加载时重新绘制图标。第二个将隐藏所有内容，直到加载图标。

的更多信息