@ Font-Face不会通过IE中的https加载

Question

EDIT 23-06-2012 10:24 (CET):找到答案

看看最底层的答案.这就是为我解决问题的原因.IE9正在以正确的方式呈现.IE8有一个略有不同的字体.不确定是什么字体,但看起来"OK".

Original Question:

我已经在这几个小时里苦苦挣扎了.对于我们的一个客户,我们设计了一个网店,并通过一个非正常的http连接进行开发.从2天前开始,我们在域上安装了SSL证书,并强制每个与网站的连接使用.htaccess覆盖https域

但是,出于某种原因,IE(没有版本)使用@ Font-Face渲染我们在CSS中指定的字体.以下是我们用于字体的代码:

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot');
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.woff') format('woff'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.ttf') format('truetype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

正如您所看到的,我正在使用包括https在内的字体的完整链接.我已经尝试将文件移动到域的根目录以匹配SSL证书域.我也尝试使用CSS中的相对路径,但这也没有用.

所有字体都在域中,它们都不是跨域的.

我在这里发现了另外两篇文章,描述了类似的问题,其中一个没有解决,另一个是,但它似乎不是同一个问题.在这种情况下,问题的作者必须将Access-Control-Allow-Origin标头添加到woff/ttf/otf/svg的文件请求中.我还将这些标题添加到我的.htaccess中以确保:

<FilesMatch "\.(woff|ttf|otf|svg)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

我有点用尽了选项.我不是服务器配置类型的人,但更多的是PHP/MySQL/jQuery所以我想我的想法与SO上的其他人相比相当有限.

如果有人有一个值得尝试的选项,请告诉我!

UPDATE 22-06-2012:

如果我将https更改为http并刷新IE中的页面,系统会提示我有非安全内容的消息,我可以选择接受此内容.如果我选择'是'我的内容正在加载...字体可用!Yay ..但是..如果我将其改回https,字体会再次消失.

不知道我可以从中学到什么(笑),但也许这给了一个小小的想法..

UPDATE 22-06-2012 #2:

到目前为止,我尝试过:

URL( '//协议/相对/ font.eot'); URL( '../文件/相对/ font.eot'); URL( '/域/相对/ font.eot'); URL( 'HTTPS://www.secure.tld/font.eot'); URL( 'HTTP://www.normal.tld/font.eot'); (可以使用弹出窗口"在IE中包含非安全项目)

我还尝试创建一个重写文件,强制将FilesMatch(woff,ttf,otf,eot,svg)转换为http://连接.这没有像我想象的那样起作用,我也没有任何线索,它做了什么......

我还补充说:

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz

到包含字体的文件夹(在.htaccess文件中)以及主.htaccess文件中.

除此之外,我试图删除htpasswd登录,这是一个疯狂的猜测,但也没有改变一件事.

UPDATE 23-06-2012:

检查了DirectAdmin服务器日志..显然IE正在请求字体(我看到带有问号的eot文件,我猜这是iefix和woff被请求的eot).请求的所有内容也获得200 OK标题响应,这对我来说不是更清楚.

仍在寻找并寻找可能导致此问题的原因..

此外,基于IE中的"F12控制台日志".我可以清楚地看到正在请求字体 - 通过https-具有200 OK响应.奇怪的是我只看到我正在使用的4种字体中的3种,但可能第4种未在主页上使用.

Answer 1

我对IE和https的行为完全相同。IE尝试加载4种字体中的3种，但是服务器交付资源后，IE便崩溃了，移至下一种字体。最终，没有字体被加载，该站点看上去很烂。在我的情况下，HTTP标头“ pragma = no-cache”就是使IE困惑的地方。从响应中删除它后，一切都进行顺利。另请参阅我的博客条目，其中解释了Wildfly和Undertow的技巧：博客

更新：

同时，我在Microsoft connect上打开了一个错误：https : //connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma -无缓存

如果您希望他们解决问题，请对该错误进行投票。

Answer 2

肯定有同样的问题。当满足所有条件时，将发生IE（在我们的案例中为11 / Trident 7）组合错误：

HTTPS，无缓存头

在单独管理的某些域上，这不是一个容易解决的问题

Answer 3

所以，据我所知，我刚刚找到了一种适用于 IE、Safara、Firefox 和 Chrome 的方法。

由于我尝试过的所有方法都没有成功，所以我试图找到一种可以将字体“嵌入”到我的网站、CSS 或服务器的方法。根据我的服务器人员的说法，将字体添加到我的服务器不是一个选项，所以我决定回到 Font-Squirrel 看看他们是否提供了转换字体的选项。

我重新上传了我的字体并选择了导出模式。在设置字段底部的某个地方写着“Base64 Encode”，幸运的是我知道这意味着什么（我可以想象有人不会轻易查看这个选项），所以我用 Base64 嵌入字体生成了我的 CSS 文件。

这工作完美无缺。当然，这使我的 CSS 文件变大了一些 kb（5kb vs 129kb）。但就目前的互联网连接而言，我并没有看到额外 100kb 的巨大优势。

只是为了比较，非 base64 编码的 CSS：

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

Base64 编码的 CSS：

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('proximanova-bold-webfont-webfont.eot');
    }

@font-face {
    font-family: 'ProximaNovaBold';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
         url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
         url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}