图标字体未在IE11中加载 [英] Icon fonts not loading in IE11

问题描述

我们使用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格式（'truetype'），
 url（'fonts / icon.svg？-3q3vo5＃rezku'）格式（'fonts / icon.ttf？-3q3vo5' 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; 
 
 / *更好的字体渲染=========== * / 
 -webkit-font-smoothing：antialiased; 
 -moz-osx-font-smoothing：grayscale; 
} 
 .icon-alphabet：before {
 content：\e600; 
} 
 / * etc等等* / 
  

奇怪的。查看开发者工具，正在发送对字体的HTTP请求，但只接收了几百个字节（可能只是头部）。

但HTTP响应正确列出了内容长度

响应主体选项卡只是无数据可查看。

在地址栏中粘贴网址会导致下载完整的文件。

解决方案

进入一个类似的问题，从上面的截图，响应有一个Cache-Control标题为'no-store'。 IE似乎有缓存和字体的问题。

删除Cache-Control：no-store和Pragma：no-cache

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

We're using icomoon for our icon fonts, and they work fine in Chrome and Firefox, but won't display in IE11... Sometimes. It seems to work on the first page load, but not on subsequent page loads. Clearing the cache doesn't seem to reset it. This issue may be present in other IE versions, right now we're just focusing on IE11.

Here's our @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 */

But here's where it gets weird. Looking at the developer tools, an HTTP request for the fonts is being sent, but only a few hundred bytes are being received (probably just the headers).

But the HTTP response lists the content length correctly as several kilobytes.

The "Response body" tab just says "No data to view."

You can see in the Network Panel screenshot that the Google Fonts aren't behaving like this.

Pasting the URL in the location bar results in the full file being downloaded.

解决方案

Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.

Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.

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

这篇关于图标字体未在IE11中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！