Font Awesome与HTTPS的兼容性问题

Question

我在自己的网站上使用HTTPS时，在IE8中使用Font Awesome时出现了问题，甚至在Font Awesome的官网上也能够重现。如果我在IE8中访问Font Awesome over HTTPS ，所有图标都会显示为方框，但是如果我访问 Font Awesome over HTTP，图标就可以正确地显示。

这里出现了什么问题？我听说这可能与Font Awesome over HTTPS中的相对字体路径有关，但不确定。

以下是喜欢这类事情的人的截图：

更新

下面是引用字体并加载CSS的代码。由于这似乎是Font Awesome的问题，而不是我的网站问题，因此我将使用Font Awesome网站上的代码：

引用CSS和图标的HTML代码：

<link rel="stylesheet" href="../assets/css/site.css">
<link rel="stylesheet" href="../assets/css/pygments.css">
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
...
<div class="fa-hover col-md-3 col-sm-4">
   <a href="../icon/adjust"><i class="fa fa-adjust"></i> fa-adjust</a>
</div>

在 font-awesome.css 中：

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

- Ian Dallas

---

你能展示一下加载字体的代码部分吗？你是使用CDN还是从服务器本地加载？你是使用相对路径还是绝对路径？许多因素可能导致页面内容从HTTP和HTTPS源混合加载，从而导致在主页面通过HTTPS加载时在IE8中出现的问题。 - Arbel

已更新。如果您需要更多信息，但您也可以访问Font Awesome的网站并查看它们的源代码。谢谢！ - Ian Dallas

另一个数据点。如果在@font-face部分中使用硬编码路径http://而不是相对URL，则可以正常加载字体（尽管IE会出现有关加载不安全内容的错误），但如果硬编码为HTTPS，则无法加载字体。似乎存在一些问题，即通过HTTPS请求.eot文件或者至少我这样做的方式存在问题。 - Ian Dallas

我有同样的问题，图标字体在通过HTTPS的IE8中无法显示。@tkeE2036，您对此问题有任何更新吗？ - Ricky Jiao

问题出在发送字体时的Pragma: no-cache。从响应中删除它（对于提供Font Awesome字体的端点），这样就可以解决问题了。 - Ian Dallas

Answer 1

我已经确定了问题，并将发布答案，以防其他人遇到同样的问题。问题出在我们与字体文件一起发送的HTTP缓存标头上。显然，这会导致IE8在HTTPS上不能加载字体（如果有人知道真正的原因，请在下面评论）。成功的标头应该是这样的：

HTTP/1.1 200 OK
Content-Type: application/vnd.ms-fontobject
Date: Wed, 26 Mar 2014 23:57:04 GMT
ETag: "08b27bc96115c2d24350f0d09e6a9433f"
Last-Modified: Wed, 26 Mar 2014 12:10:02 GMT
Server: Apache-Coyote/1.1
Content-Length: 38205
Connection: keep-alive

但实际上，它们被发送成这样：

HTTP/1.1 200 OK
**Cache-Control: max-age=31556926, must-revalidate
Content-Type: application/vnd.ms-fontobject
Date: Wed, 26 Mar 2014 23:58:06 GMT
ETag: "08b27bc96115c2d24350f0d09e6a9433f"
**Expires: Fri, 27 Mar 2015 05:46:52 GMT
Last-Modified: Wed, 26 Mar 2014 12:12:12 GMT
**Pragma: no-cache
Server: Apache-Coyote/1.1
**Set-Cookie: JSESSIONID=844B0798B373A3B8ED54A694C9DFB5C5; Path=/; Secure; HttpOnly
Content-Length: 38205
Connection: keep-alive

- Ian Dallas

---

只是为了任何遇到这个问题的人。问题并不在于Cache-Control头信息。如果它被设置为no-cache，会导致问题。我怀疑真正的问题可能与“Pragma：no-cache”有关。 - Ian Dallas

这个问题有什么解决方案吗？ - Emanuele Parisio

我遇到了同样的问题，我在谷歌上搜索了这个问题，但是没有找到解决方案。欢迎任何想法！ - Ricky Jiao

是的，在我的https网站上也遇到了同样的问题。 - Jens

这是IE浏览器上的Bug：https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache - t1gor

Answer 2

这种情况只会在使用https的IE浏览器中出现。

从与fontawesome相关的文件中删除任何阻止缓存的HTTP头，例如：

Expires -1
Pragma: no-cache

在移除这些文件的缓存控制后，您应该能够看到您的图标。重新加载页面后，所有相关的fontawesome文件应该显示HTTP代码304，即文件来自浏览器缓存。

- Guido Müller

Answer 3

我认为也是这样，

与 Font Awesome 在 HTTPS 下的相对字体路径有关。

- eventHandler

Answer 4

在web.xml中添加NoCacheHeaderFilter，并提供排除的文件路径。

<filter>
    <filter-name>NoCacheHeaderFilter</filter-name>
    <filter-class>NoCacheHeaderFilter</filter-class>
    <init-param>
        <param-name>exclude</param-name>
        <param-value>^/(image|css|js|fonts|lib|partials)/.*</param-value>
    </init-param>
</filter>

添加类似这样的过滤器。

    if (null != exclude) {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        String context = httpRequest.getContextPath();
        String path = httpRequest.getRequestURI().substring(context.length());
        if (!exclude.matcher(path).matches()) {
            httpResponse.setHeader("Pragma", "no-cache");
            httpResponse.setHeader("Cache-Control", "private, max-age=0, no-store, no-cache");
            httpResponse.setDateHeader("Expires", System.currentTimeMillis());
        }
    }

    chain.doFilter(request, response);

- anfas

Answer 5

实际的解决方案是使用代理来隐藏浏览器中返回的任何缓存控制和Pragma："no-cache"头部。 我像这样使用了nginx，在https代理位置添加了以下命令：

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma; 

请查看此处的详细信息。

- user1767316