图标字体未在IE11中加载

Question

我们使用icomoon作为我们的图标字体,它们在Chrome和Firefox中运行良好,但不会在IE11中显示......有时候.它似乎适用于第一页加载,但不适用于后续页面加载.清除缓存似乎没有重置它.这个问题可能出现在其他IE版本中,现在我们只关注IE11.

这是我们的@ font-face:

@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
    url('fonts/icon.woff?-3q3vo5') format('woff'),
    url('fonts/icon.ttf?-3q3vo5') format('truetype'),
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */

但这里变得奇怪.查看开发人员工具,正在发送字体的HTTP请求,但只接收了几百个字节(可能只是标题).

但HTTP响应正确地将内容长度列为几千字节.

"响应正文"选项卡只显示"无数据可查看".

您可以在网络面板屏幕截图中看到Google字体的行为不是这样的.

在位置栏中粘贴URL会导致下载完整文件.

Answer 1

遇到类似的问题,从上面的截图中,响应的Cache-Control标题为"no-store".IE似乎在缓存和字体方面存在问题.

同时删除'Cache-Control:no-store'和"Pragma:no-cache"标题可以让我们再次显示图标字体.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Answer 2

在调查了同样的问题,并通过在线发布的各种解决方案后,我创建了以下故障排除列表,其中涵盖了大多数潜在原因:

1. 在IE中,在Internet选项/安全/自定义级别/字体下载启用/禁用下禁用字体下载.它们可能会被您的网络管理员禁用,在这种情况下,您将无法查看或更改此设置.
2. 您的HTTP标头阻止IE在本地存储字体文件.要修复此问题,请删除任何Cache-Control: no-store, no-cache或Pragma: no-cache标题或任何Expires包含过去日期的标题.另外,Vary头部有其IE技巧,如果设置为任何以外Accept-Encoding,User-Agent,Host还是Accept-Language那么IE将不缓存任何东西,除非一个ETAG头也存在(请参阅此MSDN博客文章).
3. 您没有为字体下载设置正确的MIME类型.例如,Jetty 9将默认设置Content-Type: text/plain为通常的字体类型(eot, woff, woff2).有关要使用的正确内容类型,请参阅此答案.
4. 确保使用display: block或display: inline-block用于您的图标元素.
5. 最后,请务必查看FontAwesome上的故障排除指南.