Glyphicons 在 chrome 中刷新时闪烁答案

【问题标题】：Glyphicons blink on refresh in chromeGlyphicons 在 chrome 中刷新时闪烁
【发布时间】：2014-10-09 15:34:36
【问题描述】：

我正在使用 Bootstrap 字形图标。它们运行良好，但使用 Chrome 浏览器时，字形图标会在页面加载时闪烁

例如：

我怎样才能解决它，让他们不眨眼？

这是截图：

注意：这只发生在 Chrome 中，不会发生在 FF 或 IE 中。

【问题讨论】：

【解决方案1】：

一般来说，这是flash of unstyled content (FOUC) 的问题。

具体来说，这就是 Paul Irish 所说的 flash of unstyled text (FOUT)：

在 Firefox 中，在自定义字体准备好之前，文本基本上是默认的网络字体

Webkit 采用了非常different approach，并且非常有意。他们认为最好在字体准备好之前保持文本不可见。这样一来，文字就不会闪现到它新升级的自我中

换句话说，这个问题不是那么容易解决的。

您可以尝试通过以下方式最小化影响：

粗暴的方法是等到所有内容都呈现后才向用户显示页面，但我强烈建议不要这样做。用户对初始加载时间非常不耐烦，但在渲染额外内容时却更加宽容。

【讨论】：

很好的答案和很棒的编辑顺便说一句！ gzip 已经被使用了。据我了解，这只是一个 webkit 的东西。我最大的问题是，因为字形图标在稍后阶段加载，我的其他文本/布局正在改变，因为首先字形图标只有 1px，当它加载时，它是例如15 像素。我通过给字形图标一个固定的大小来解决这个问题。

【解决方案2】：

重新加载页面时字形图标闪烁/闪烁，但对我来说更大的问题（我正在使用 Bootstrap 3）是 页面闪烁作为元素围绕字形图标调整大小。将此添加到我的 CSS 会停止调整大小：

.glyphicon {
    width: 14px;
    height: 14px;
}

【讨论】：

【解决方案3】：

我遇到了完全相同的问题，但通过在 IIS 中添加 .woff 和 .woff2 作为新的 MIME 类型 font/x-woff 解决了它。

这会阻止字形图标立即闪烁，因为 Chrome 现在可以正确缓存字体文件。

要查看这是否适用于您，请在闪烁的站点上打开 Chrome (F12) 中的调试控制台，您会发现与字形字体文件相关的错误，其中浏览器将它们解释为错误的 MIME输入。

【讨论】：