IE11 字体问题

Question

IE11/Windows 8.1 有一点神秘问题，它似乎只影响一些用户。我有一个从 fontello.com 生成的字体，可以在我能想到的所有浏览器中使用，它既美观又防弹。直到上周我登录我们的软件并且字体没有正确加载时，一切都很好。我一天中的大部分时间都在搜索、谷歌搜索和渴望答案，但我没有找到这样的运气。

这是我发现的：

该字体在一个类似于现场环境的临时环境中工作。 Staging 是 Apache 2.2.25，live 是 Apache 2.2.3。在暂存中，在 IE11 上字体可以正常通过，并且 Content-Type 标头显示为 application/vnd.ms-fontobject 并且字体加载正常。在现场，字体要么为空白/空，要么以中文/日文字符的形式出现，而 Content-Type 以 text/plain 的形式出现。在另一台计算机上，我在 Windows 8.1/IE11 中尝试过，它工作得很好，类型仍然是 text/plain，但在我的家用计算机上，它仍然存在 text/plain 的问题。我在其他计算机上测试过的 Windows 7 或 8 的 IE11 上没有这些问题，但也许我没有足够的计算机来完全测试这一点。这里有一些屏幕截图以供澄清。

它应该是什么样子

在 IE11/Windows 8.1 中的样子

这是我使用的从 Fontello 生成的 CSS。另一个有趣的注意事项是 IE11 正在尝试提取 /fonts/sweeticons.eot?303474737448#iefix，而不是 /fonts/sweeticons.eot?303474737448。在登台时，它只会下载 /fonts/sweeticons.eot?303474737448 但在现场它会尝试下载 /fonts/sweeticons.eot?303474737448#iefix 和 /fonts/sweeticons.woff?303474737448 和 /fonts/sweeticons.ttf?303474737448 ，但它们都不能正常工作，或者这就是它们不能正常工作的原因。在查看开发者工具时，IE11 会识别所有应加载字体的类，但所有语句都被划掉（好像该类被文件中较低的类或内联样式覆盖）：

@font-face {
  font-family: 'sweeticons';
  src: url('/fonts/sweeticons.eot?303574737448');
  src: url('/fonts/sweeticons.eot?303474737448#iefix') format('embedded-opentype'),
       url('/fonts/sweeticons.woff?302374734478') format('woff'),
       url('/fonts/sweeticons.ttf?303374737448') format('truetype'),
       url('/fonts/sweeticons.svg?303274734478#sweeticons') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="fa-"]:before, [class*=" fa-"]:before {
  font-family: "sweeticons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
}

[class^="fa-"]:hover,[class*=" fa-"]:hover{
    text-decoration:none;
}

下面是实时服务器的快速屏幕截图及其尝试做的事情：

这里还有一些实时 eot 文件的标头信息：

Date: Wed, 24 Sep 2014 17:49:06 GMT  
Server: Apache/2.2.3 (Red Hat)  
Last-Modified: Thu, 18 Sep 2014 20:32:15 GMT  
Accept-Ranges: bytes  
Vary: Accept-Encoding  
Content-Encoding: gzip  
Content-Type: text/plain; charset=UTF-8  
Content-Length: 24212  
Connection: close 

此外，如果您没有从上面的 CSS 中注意到，这与 CORS 或跨域任何东西无关，这些是直接托管在服务器上的本地文件。我已经在谷歌上窥探了，我能想到的最好的办法就是等待，看看微软的另一个更新是否会像过去一样解决这些问题。我有 IE 11.0.9600.17278 并更新版本 11.0.12。我很难过，所以任何关于解决方法的见解都会很棒。

编辑

所以现在我已经对其进行了更多测试，我认为这是服务器问题？我创建了这个测试文件。 http://sky-9.com/ie11/ 它可以在 IE11 中独立运行。我将这些确切的文件复制到我的实时服务器并在那里进行了测试，但它不起作用。让我相信 Apache 2.2.3 在某个地方存在问题？ EOT 文件的 Etags 已关闭，它们是 gzip 文件...我刚刚尝试在 sky-9 上对文件进行 gzip 压缩，但它仍然可以正常运行。

另外，只是指出 sky-9.com 的 Apache 版本是 2.2.15

Answer 1

我知道这是一个老问题。但我今天遇到了这个问题，所以我想我会记录下解决方案，以防它帮助其他人。

我有一个非常相似的问题，fontello 字体（通过 @font-face 加载）在包括 IE 11 在内的所有浏览器中的一台服务器上运行良好，但从另一台服务器（在我的case Asp.Net Core）在除 IE 之外的所有浏览器中工作。具体来说，我现在关心的唯一 IE 版本是 IE 11。

我就像这个问题的原始海报一样感到困惑。最后我发现问题是一台服务器的缓存头配置与另一台服务器不同。

能够让 IE 11 正确呈现字体文件的服务器返回 cache-control:max-age=0。导致中文字符出现在 IE 11 中的服务器正在返回 cache-control:no-cache, no-store, must-revalidate 为了解决这个问题，我从字体文件的响应中删除了 cache-control 标头。现在字体可以在包括 IE 11 在内的所有浏览器中正确呈现。

Answer 2

由我通过删除 IE 文件的“Vary”标题来修复。

<Location ~ \.eot$>
  Header unset Vary
</Location>