IE11 下载多个图标文件而不是一个

Question

我有一个使用 @font-face 来显示 TinyMCE 图标的 web 应用程序。在本地运行应用程序时，这些图标会按预期在 IE11 中显示。但是，部署到云服务器时，图标不会出现在 IE11 中。我已经编辑了我的@font-face 以将 .eot 文件排除在等式之外，以便所有浏览器都只获取 .woff。此外，在我的应用程序的本地和远程版本上，图标会按预期在 Chrome、Safari 和 Firefox 上加载和显示。我注意到了 2 个关键点：

1. 在本地应用程序（通过 HTTP）上，IE11 获取图标文件 tinymce.woff，没有问题。在我更改它以获取 .woff 而不是 .eot 之前，.eot 也可以正常工作。但是，在应用程序的远程版本（通过 HTTPS）上，IE11 获取 tinymce.eot、tinymce.woff 和 tinymce.ttf（按此顺序）并且都有 200 响应代码。为什么IE11会下载3个不同版本的图标文件？这三个文件之间是否可能存在某种冲突，导致图标不显示？如果是这样，我该如何解决这个问题？请记住，在应用程序的本地版本上，IE11 仅获取我认为是我想要的行为的图标文件 (tinymce.woff) 之一。

2. 研究使我相信问题可能出在“Pragma”和“Cache-Control”标头上，这些标头作为对应用程序对图标文件的 GET 请求的响应而被发回。但是，我无法弄清楚如何删除 HTTP 响应的这些标头。我的应用程序使用 Spring MVC。

我当前的@font-face 配置：

@font-face{font-family:'tinymce';
  src:url('fonts/tinymce.woff') format('woff'),
  url('fonts/tinymce.ttf')format('truetype'),
  url('fonts/tinymce.svg#tinymce') format('svg');
  font-weight:normal;
  font-style:normal}

Answer 1

解决方案确实摆脱了“pragma”标题。由于我的项目是一个 Spring Boot 应用程序，因此我在我的安全配置类中创建了一个标头过滤器。创建 Spring 安全配置类： 1. 创建一个扩展 org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter 的类。 2. 给类添加以下注解：

-@Configuration (org.springframework.context.annotation.Configuration) -@EnableWebSecurity(org.springframework.security.config.annotation.web.configuration.EnableWebSecurity)

-@EnableGlobalMethodSecurity(securedEnabled = true, prePostEnabled = true) (org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity)

1. 在类中，创建一个带有@Bean 注解的方法。这是我的完整定义：

   public HeaderWriter cacheControlHeaderWriter()
   {
       return new DelegatingRequestMatcherHeaderWriter(
           new NegatedRequestMatcher(new RegexRequestMatcher(".+\\.((eot(\\?)?)|(woff2?)|(ttf)|(svg))", "GET")),
           new CacheControlHeadersWriter()
       );
   }
   

Answer 2

不看演示就很难猜。但由于 IE11 下载了一个 EOT，它不在您的 @font-face 规则中，看起来您认为正在执行的 CSS 不是浏览器使用的 CSS。

如果@font-face 规则是 没问题（但是您在此处复制/粘贴了错误的规则），那么可能字体上没有设置可安装位。 IE11 需要这个，但另一方面，你会希望图标字体能够处理这个问题。

也有可能在所提供的字体上未正确设置 mime 类型。有关一些故障排除选项，请参阅 this thread。

而且，如果您找到解决方案，请在此处发布，以便其他人也可以学习！ :-)