通过SSL访问Web时，无法在IE8和IE9中加载字体 [英] Font-face not loading in IE8 and IE9 when accessing web via SSL

问题描述

我正在为我的网站使用webfont(由Spring用于Apache Tomcat 6服务器).我将字体包含在我的css文件中，字体为:

I'm using a webfont for my website (made with Spring for an Apache Tomcat 6 server). I'm including my font in my css file with font-face as:

@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页面调用，并具有以下内容:

This css is called in a "layout.jsp" file which is called by all the rest of jsp pages, with the following:

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

当我通过http:///webSite

This is working for every browser when I access my website internally via http:///webSite

但是，我们还有一个Apache服务器，该服务器通过SSL(使用安全证书)通过URL https:///重定向到先前的URL，从而为网站提供服务. 使用SSL-https配置时，Web在每种浏览器中都可以正常运行，但是该字体未在IE8和IE9中加载.

However, we have also an Apache server which is serving the website via SSL (using a secure certificate) in the URL https:/// which redirects to the previous URL. When using the SSL-https config the web is working well in every browser, but the font is not loading in IE8, nor in IE9.

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

This is: - via http: fonts are loading well in every browser, including IE8 and IE9 - via https: fonts are loading well in every browser, but IE8 and IE9

可以随时从浏览器访问字体.就是说，如果我写文件的路径，我可以毫无问题地下载它.此外，在资源管理器的开发人员工具"下的网络"选项卡上，我可以看到字体已正确下载(状态:200).

The font is accessible from the browser at anytime. This is, if I write the path to the file, I can download it without problems. What is more, under Developer Tools of explorer, at Network tab I can see that the font is correctly downloaded (status: 200).

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

I've tried to include my font completelly in my CSS using its byte64 codification, instead of the path to the file with the generator of 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中仍然没有运气.

Doing this, the font is loading well in IE9, but not in IE8. At first, I thought it could be caused by the limitation of 32Kb at URLs. So, I reduced the charset of the font to reduce its size to about 20kb, and still no luck in IE8.

有帮助吗?

推荐答案

实际的答案是使用代理向浏览器隐藏任何无效缓存的标头. 就像缓存控制"和编译指示一样:无缓存"标头返回到浏览器.

The practical answer is,using a proxy, to hide to the browser any cache-invalidating headers. Like "cache-control" and pragma: "no-cache" headers returned to the browser.

我像这样使用nginx，将以下命令添加到https代理的位置:

I used nginx like this, adding the folowing commands the https proxied location:

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma; 

使用nginx参见此处了解详情.

使用apache httpd，您可以在此处

Using apache httpd, you'll find the syntax here

这篇关于通过SSL访问Web时，无法在IE8和IE9中加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！