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 将不会缓存任何内容，除非@ 987654332@ 标头也存在（请参阅this MSDN blog post）。
3. 您没有为字体下载设置正确的 MIME 类型。例如，Jetty 9 默认为常用字体类型（eot, woff, woff2）设置Content-Type: text/plain。请参阅 this answer 了解要使用的正确内容类型。
4. 确保使用display: block 或display: inline-block 作为您的图标元素。
5. 最后，请务必通过 FontAwesome 的 troubleshooting guide。

Answer 3

我遇到了类似的问题，但使用的是 Bootstrap 字体图标（Glyphicons）。如果可行，您可以尝试：

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

不过，我们可以在 IE 中更改此设置，使其能够下载外部字体。以下是在 IE 中要采取的步骤- 转到：设置>> Internet选项>>安全

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

刷新页面

Answer 4

我遇到了类似的问题，这似乎是由于 IE 在某些 display 和 position 设置与 iconfonts 的组合时遇到了困难。

它通常应该使用：

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

Answer 5

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

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

Answer 6

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

基本上，微软让我们不得不重新使用精灵表。

Answer 7

在我的例子中，它是损坏的 .eot 字体文件。我生成了一个新的（+ 新的 .css 样式），它解决了这个问题。试试吧。

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

@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;
}