Glyphicons在镀铬时闪烁

Question

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

例如：

1. 在Bootstrap上打开此链接：
   • http://getbootstrap.com/components/#glyphicons-glyphs
2. 加载后，按 F5 或刷新。
3. 你会看到字形符号闪烁。

如何修复它以免它们眨眼？

这是一个截图：



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

Answer 1

通常，这是flash of unstyled content (FOUC)。

的问题

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

  

在 Firefox 中，基本上文字是默认的webfont，直到自定义字体准备就绪

     

     

Webkit 需要非常different approach，非常有意。他们认为在字体准备好之前保持文本不可见更好。这样，文本就不会闪现在新升级的自我中

     

换句话说，这个问题不容易克服。

您可以尝试最小化影响：

• 使用 gzip 缩小文件以便下载更快
• 使用缓存，以便客户端可以使用现有副本，而不是抓取新副本。

重要的方法是等待向用户显示页面，直到呈现所有内容，但我强烈建议不要这样做。用户对初始加载时间非常不耐烦，但在渲染其他内容方面却非常宽容。

Answer 2

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

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

感谢我的来源：https://www.garysieling.com/blog/preventing-icon-flicker-using-glyphicons

Answer 3

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

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

要查看这是否适用于您，请在其闪烁的网站上的Chrome（F12）中打开调试控制台，您会发现与glyph-font-files相关的错误，浏览器会将其解释为错误的MIME类型。