@ font-face EOT未通过HTTPS加载

Question

摘要

我在IE 7,8,9中通过HTTPS使用@ font-face遇到了一个问题 - 它根本就没有加载.包含HTML页面是否托管在HTTPS上并不重要,当我尝试通过HTTP加载EOT字体时,它不起作用.有没有人见过这种行为？

托管该字体的服务器正在发送正确的content-type ="application/vnd.ms-fontobject"

我尝试了多种字体,因此它并不特定于字体.

字体是在Font Squirrel上生成的

CSS语法

@font-face {
font-family: 'GothamCondensedBold';
src:url('path/to/fontgothmbcd-webfont.eot');
src:url('path/to/fontgothmbcd-webfont.eot?#iefix') format('embedded-opentype'),
    url('path/to/fontgothmbcd-webfont.woff') format('woff'),
    url('path/to/fontgothmbcd-webfont.ttf') format('truetype'),
    url('path/to/fontgothmbcd-webfont.svg#GothamCondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}

样本页面

http://gregnettles.net/dev/font-face-test.html

Answer 1

我用HTTPS遇到了这个问题,但不是HTTP.出于某种原因,IE将继续通过不同的字体选项,忽略200 OK响应.

就我而言,问题是Cache-Control: no-cache字体的HTTP标头.虽然这可以很好地使用HTTP,但通过HTTPS会导致Internet Explorer忽略下载的字体.

我最好的猜测是它是这种行为的变种:

KB 815313 - 通过SSL下载活动文档时防止缓存 (存档)

因此,如果您在开发人员工具网络视图中看到IE通过每种字体工作,则可能值得检查您是否有Cache-Control标题并将其删除.

Answer 2

我知道这是一个老线程,但我不得不权衡.我们在所有版本的Internet Explorer(7-11)中没有通过HTTPS加载的EOT和WOFF字体也存在同样的问题.经过几个小时的试验和错误,并将我们的标题与其他工作网站进行比较,我们发现这是vary标题,搞砸了.取消设置这些文件类型的标头立即解决了我们的问题.

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

奖金阅读

• Eric Lawrence:谨慎小心 (存档)
• IE博客:Internet Explorer 9中的缓存改进 (存档)

Answer 3

这通常是由于在下载.woff或.eot文件时跟随响应标头而发生的.

• Cache-Control = no-cache,no-store,max-age = 0,must-revalidate
• Pragma = no-cache

在我的情况下,我使用spring-boot并删除这些标题我必须做以下.这也解决了这个问题.

public class SecurityConfig extends WebSecurityConfigurerAdapter { 
@Override
public void configure(HttpSecurity http) throws Exception {
   http.headers().defaultsDisabled()
        .addHeaderWriter(new StaticHeadersWriter("Cache-Control"," no-cache,max-age=0, must-revalidate"))
        .addHeaderWriter(new StaticHeadersWriter("Expires","0"));
 }
}