通过 SSL 访问 Web 时字体未在 IE8 和 IE9 中加载答案

【问题标题】：Font-face not loading in IE8 and IE9 when accessing web via SSL通过 SSL 访问 Web 时字体未在 IE8 和 IE9 中加载
【发布时间】：2013-09-19 09:21:20
【问题描述】：

我正在为我的网站使用 webfont（使用 Spring 为 Apache Tomcat 6 服务器制作）。我将我的字体包含在我的 css 文件中，字体为：

@font-face{
  font-family:'FontAwesome';
  src:url('fonts/fontawesome-webfont.eot?v=3.0.1');
  src:url('fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }

这个 css 在一个 "layout.jsp" 文件中被调用，该文件被所有其余的 jsp 页面调用，具有以下内容：

 <link href="<c:url value='/styles/font-awesome.min.css'/>" rel="stylesheet" type="text/css"/>

当我通过 http:///webSite 在内部访问我的网站时，这适用于每个浏览器

但是，我们还有一个 Apache 服务器，它通过 URL https:/// 中的 SSL（使用安全证书）为网站提供服务，该 URL 重定向到之前的 URL。使用 SSL-https 配置时，Web 在每个浏览器中都运行良好，但是在 IE8 和 IE9 中都没有加载字体。

这是： - 通过 http：字体在每个浏览器中都能很好地加载，包括 IE8 和 IE9 - 通过 https：字体在每个浏览器中都能很好地加载，但 IE8 和 IE9

可以随时从浏览器访问该字体。也就是说，如果我写了文件的路径，我可以毫无问题地下载它。更重要的是，在资源管理器的开发者工具下，在网络选项卡中，我可以看到字体已正确下载（状态：200）。

我尝试使用它的 byte64 编码将我的字体完全包含在我的 CSS 中，而不是使用 fontSquirrel 生成器的文件路径：

@font-face {
    font-family: 'fontawesomeregular';
    src: url('fonts/fontawesome-webfont.eot');
    }

@font-face {
    font-family: 'fontawesomeregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,[BYTE64_STRING]) format('woff'),
         url('fonts/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

这样做，字体在 IE9 中可以很好地加载，但在 IE8 中则不行。起初，我认为这可能是由于 URL 的 32Kb 限制造成的。因此，我减少了字体的字符集以将其大小减小到大约 20kb，但在 IE8 中仍然没有运气。

有什么帮助吗？

【问题讨论】：

标签： apache ssl font-face

【解决方案1】：

我遇到了完全相同的问题，今天终于解决了。我注意到一个特定的网络字体在一个 HTTPS 域上的 IE8/9 中工作，但在另一个域上却没有。无效域的服务器正在为 .eot 请求发送以下 HTTP 响应标头：

Cache-Control: no-cache

删除此标题后，字体再次在 IE8/9 中工作。我希望这对你也有帮助。

【讨论】：

【解决方案2】：

实际的答案是，使用代理向浏览器隐藏任何缓存无效的标头。像 "cache-control" 和 pragma: "no-cache" 标头返回给浏览器。

我这样使用 nginx，在 https 代理位置添加以下命令：

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma;

使用 nginx 查看 here for details。

使用 apache httpd，你会发现语法 here

【讨论】：