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请求，但只接收了几百个字节（可能只是标题）。

Network panel

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

Response headers

“响应正文”标签只显示“无需查看数据。”

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

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

Answer 1

遇到类似的问题，从上面的屏幕截图中，响应的缓存控制标题为“无商店＆＃39;”。 IE似乎在缓存和字体方面存在问题。

同时删除＆＃39; Cache-Control：no-store＆＃39; ＆＃34; Pragma：no-cache＆＃34;标题为我们工作，让图标字体再次出现。

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

Answer 2

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

在IE中禁用字体下载，在Internet选项/安全/自定义级别/字体下载启用/禁用下。它们可能会被您的网络管理员禁用，在这种情况下，您将无法查看或更改此设置。
您的HTTP标头阻止IE在本地存储字体文件。要解决此问题，请删除所有Cache-Control: no-store, no-cache或Pragma: no-cache标头或任何带有过去日期的Expires标头。此外Vary标头在IE中有其技巧，如果设置为Accept-Encoding，User-Agent，Host或Accept-Language以外的其他任何内容，那么IE将不会缓存任何内容，除非还存在ETAG标头（请参阅this MSDN blog post）。
您没有为字体下载设置正确的MIME类型。例如，对于通常的字体类型（Content-Type: text/plain），Jetty 9将默认设置eot, woff, woff2。有关要使用的正确内容类型，请参阅this answer。
请务必使用display: block或display: inline-block作为图标元素。
最后，确保通过FontAwesome上的troubleshooting guide结束。

Answer 3

我遇到了类似的问题，似乎是因为IE在某些display和position设置与iconfonts结合时遇到了问题。

通常应该使用：

element:before {
     display:block;
     position: absolute;
     ... your styles ...
}

Answer 4

我遇到了类似的问题但是使用了Bootstrap字体图标（Glyphicons）。你可以试试这是否有效：

（通常在Windows 10上）IE-11设置已更改为不下载任何外部字体并仅使用Windows中可用的字体。这是默认行为。

但是我们可以在IE中更改此设置以使其能够下载外部字体。以下是在IE-中采取的步骤转到：设置＆gt;＆gt;互联网选项＆gt;＆gt;安全

点击“互联网”（或您可能正在使用的任何区域）＆gt;＆gt; “自定义级别......”
“安全设置”中的下一步 - 启用“字体下载”。默认情况下，它将被禁用。

刷新页面

Answer 5

语法是正确的，但是您使用的转换器从.tff转换为.eof的方式可能存在问题。有关此问题的更多详细信息，请参阅此文章http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

与此同时，您可以尝试使用Google字体托管的字体来测试问题。我这样说是因为谷歌无缝地处理跨浏览器兼容性。如果事实证明Google字体有效，那么您就知道它的字体转换方式存在问题，您需要尝试另一种字体。根据我的理解Font Squirrel非常擅长生成跨浏览器兼容的字体。我希望这有助于好运

Answer 6

就我而言，它的.eot字体文件已损坏。我生成了一个新的（+新的.css样式），它解决了这个问题。尝试一下。

PS。确保您在@ font-face支持IE的EOT，例如：

@font-face {
  font-family: "fontName";
  src:url("../../src/theme/fonts/fontName.eot");
  src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
  url("../../src/theme/fonts/fontName.woff") format("woff"),
  url("../../src/theme/fonts/fontName.ttf") format("truetype"),
  url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
  font-weight: normal;
  font-style: normal;
}

Answer 7

这是问题所在： https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

基本上微软让我们不得不回到使用精灵表。

图标字体未在IE11中加载

7 个答案: