CSS 图标字体未在 IE11 中加载

Icon fonts not loading in IE11

提问by Theron Luhn

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.

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

Here's our @font-face:

这是我们的@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).

但这就是它变得奇怪的地方。查看开发人员工具，正在发送对字体的 HTTP 请求，但只接收了几百个字节（可能只是标题）。

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

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

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.

您可以在网络面板屏幕截图中看到 Google 字体的行为并非如此。

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

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

采纳答案by timjchin

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.

遇到了类似的问题，从上面的屏幕截图中可以看出，响应的 Cache-Control 标头为“no-store”。IE 似乎在缓存和字体方面存在问题。

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

删除 'Cache-Control: no-store' 和 "Pragma: no-cache" 标题使我们能够再次显示图标字体。

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

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

回答by Andrei Socaciu

After investigating the very same issue, and going through various solutions posted online, I've created the following troubleshooting list, which covers most potential causes:

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

1. Font downloads are disabled in IE, under Internet Options / Security / Custom Level / Font Downloads enable /disable. They might be disabled by your network admin, in which case you would not be able to see nor change this setting.
2. Your HTTP headers prevent IE from storing the font file locally. To fix, remove any Cache-Control: no-store, no-cacheor Pragma: no-cacheheaders, or any Expiresheader with a date in the past. Also the Varyheader has its tricks in IE, if set to anything other than Accept-Encoding, User-Agent, Hostor Accept-Languagethen IE will not cache anything, unlessan ETAGheader is also present (see this MSDN blog post).
3. You don't set the correct MIME types for the font download. For example Jetty 9 will set by default Content-Type: text/plainfor the usual font types (eot, woff, woff2). See this answerfor the proper content types to use.
4. Make sure to use display: blockor display: inline-blockfor your icon element.
5. Finally, make sure to go through the troubleshooting guideover at FontAwesome.

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 上的故障排除指南。

回答by Saurabh R S

I faced similar problem but with Bootstrap font icons (Glyphicons). You can try if this works:

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

(Generally on Windows 10) the IE-11 settings have been changed to not download any external fonts and use only the fonts available in windows. This is the default behavior.

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

However we can change this setting in IE to enable it to download external fonts. Following are the steps to be taken in IE- Go to: Settings >> Internet Options >> Security

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

Click on “Internet” (or any zone that you may be using) >> “Custom level…”
Next in the ‘security settings' – Enable ‘Font Download'. By default it would be disabled.

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

Refresh the Page

刷新页面

回答by tobias47n9e

I had a similar problem and it seems to be caused by IE having difficulty with certain displayand positionsettings in combination with iconfonts.

我有一个类似的问题，它似乎是由 IE与 iconfonts 结合使用某些display和position设置有困难引起的。

It should usually work using:

它通常应该使用：

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

回答by coderrick

The syntax is correct, however there may be an issue with the way whatever converter you used to converted from .tff to .eof. See this the article for more details on this matter in general http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

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

In the mean time you could try testing the problem by using a font hosted by Google fonts. I say this because Google handles cross browser compatibility seamlessly. If it turns out that the Google font works then you know its a problem with the way that your font was converted and you need to try another one. From what I understand Font Squirrelis really good at generating cross browser compatible fonts. I hope this helps good luck

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

回答by mryarbles

This is the problem: https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

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

Basically Microsoft is making us have to go back to using sprite sheets.

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

回答by Pawe? Bednarczyk

In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it.

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

PS. Make sure you support EOT for IE at @font-face, for example:

附注。确保您在@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;
}