IE11字体问题

Question

IE11 / Windows 8.1有一点神秘的问题，它似乎只影响某些用户。我有一个从fontello.com生成的字体，可以在我能想到的每个浏览器中运行，它是甜蜜的和防弹的。一切都很好，直到上周我登录我们的软件并且font-face没有正确加载。我花了很多时间搜索，谷歌搜索，并渴望得到答案，但我找不到这样的运气。

这是我发现的：

该字体在临时环境中工作，类似于实时环境。分段是Apache 2.2.25，实时是Apache 2.2.3。在暂存时，在IE11上，字体拉得很好，Content-Type标题出现为application/vnd.ms-fontobject，字体加载正常。在现场，字体是空白/空的，或者它们以中文/日文字符形式出现，而内容类型以text / plain形式出现。在另一台计算机上，我在Windows 8.1 / IE11中尝试了这个并且它运行得很好，类型仍然是文本/纯文本，但在我的家用计算机上它仍然存在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的...我只是尝试在天空9上gziping文件，它仍然很好。

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

Answer 1

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

我有一个非常类似的问题，fontello字体（通过@ font-face加载）在包括IE 11在内的所有浏览器中的一台服务器上工作得很好，但是从不同的服务器（在我的服务器中）提供了相同的html / css案例Asp.Net Core）在所有浏览器中工作，除了IE。具体而言，我关心的唯一IE版本是IE 11。

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

能够让IE 11正确呈现font-face字体的服务器返回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>