使用 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;
}

Answer 1

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

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma; 

见here for details。

Answer 2

在 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 3

这仅在 IE 中使用 https。

从阻止缓存的相关文件中删除所有 HTTP 标头，例如

Expires -1
Pragma: no-cache

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

Answer 4

我已确定问题并将发布答案，以防其他人遇到相同问题。问题在于我们与字体文件一起发送的 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 5

我也这么认为，

与 Font Awesome over HTTPS 中的相对字体路径有关