使用HTTPS的字体很棒

Question

因此，当我在自己的网站中使用HTTPS时，我在IE8中遇到Font Awesome的问题，这在Font Awesome自己的网站上甚至可以重现。如果我在IE8中转到Font Awesome over HTTPS ，我会获得所有图标的框，但是如果我转到Font Awesome over HTTP，我会正确渲染图标。

这是什么问题？我听说它可能与通过HTTPS的Font Awesome中的相对字体路径有关，但不确定。

以下是喜欢此类内容的人的屏幕截图：

更新

所以这里是引用字体并加载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;
}

Answer 1

我已经确定了问题，并会发布答案以防其他人遇到同样的问题。问题在于我们与字体文件一起发送的HTTP缓存标头。显然这会导致IE8 over 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

Answer 2

仅在使用https的情况下在IE中发生。

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

Expires -1
Pragma: no-cache

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

Answer 3

我想是一样的，

  

通过HTTPS

中的Font Awesome中的相对字体路径

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);

Answer 5

实际的答案是，使用代理，向浏览器隐藏任何缓存控制和编译指示：“no-cache”标头返回给浏览器。 我像这样使用了nginx，将以下命令添加到https代理位置：

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma; 

请参阅here for details。