首页 文章

使用HTTPS的字体很棒

提问于
浏览 次
4

所以我'm experiencing an issue with Font Awesome in IE8 when using HTTPS in my own site and this is even reproducible on Font Awesome'自己的网站 . 如果我在IE8中转到Font Awesome over HTTPS，我会获得所有图标的框，但是如果我去Font Awesome over HTTP我会正确渲染图标 .

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

以下是喜欢此类内容的人截图：
enter image description here

Update

所以这里是引用字体并加载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;
}
css http https internet-explorer-8 font-awesome

5 回答

  • 0

    我已经确定了问题并将发布答案以防其他人遇到同样的问题 . 问题在于我们与字体文件一起发送的HTTP缓存标头 . 显然这会导致IE8 over HTTPS因某些原因无法加载字体（如果有人知道真正的原因请在下面评论） . 成功的 Headers 应如下所示：

    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
    回复于
  • 2

    这仅在IE中使用https发生 .

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

    Expires -1
Pragma: no-cache

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

    回复于
  • 0

    我也是这么想，

    通过HTTPS在Font Awesome中使用相对字体路径

    回复于
  • 0

    在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);
    回复于
  • 3

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

    proxy_hide_header Cache-Control;
  proxy_hide_header Pragma;

    见here for details .

    回复于

相关问题