Css @字体面赢得'；在IE中不能通过https加载

编辑23-06-2012 10:24（CET）

：找到答案

看看下面的答案。这就是我解决问题的原因。IE9现在呈现的方式是正确的。IE8的字体稍有不同。不确定是什么字体，但看起来“OK”

原始问题：

我已经为此挣扎了好几个小时了。对于我们的一位客户，我们设计了一个webshop，并通过一个普通的不安全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中使用相对路径，但这也不起作用

所有字体都在域中，没有一种是跨域的

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

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

到包含字体的文件夹（当然在.htaccess文件中）以及主.htaccess文件中

除此之外，我还试图删除htpasswd登录名，这是一个猜测，但也没有改变任何事情

更新23-06-2012

：

已检查DirectAdmin服务器日志。。显然IE正在请求字体（我看到一个带有问号的eot文件，我猜这就是请求iefix和woff的eot）。请求的所有内容也都得到了200 OK的标题响应，这并没有让我更清楚

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

---

此外，根据IE中的“F12控制台日志”，我可以清楚地看到字体是通过https请求的，响应为200 OK。奇怪的是，在我使用的4种字体中，我只看到3种，但可能在主页上没有使用第4种字体。

您可以使用谷歌和Typkit开发的：

---

它增加了一些开销，但也让您能够更好地控制字体加载（比如类，允许您在尚未加载字体时设置不同的样式）。也许值得一试。

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

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

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

这是完美的。当然，这使我的CSS文件大了一些kb（5kb比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;
}

@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;

}

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

@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;

}

---

我对IE和https有着完全相同的行为。IE试图加载4种字体中的3种，但服务器一交付资源，IE就中断并移动到下一种字体。最后没有加载字体，网站看起来很糟糕。 在我的例子中，http头“pragma=no cache”是让IE感到困惑的东西。从响应中删除它后，一切都很顺利。另请参阅我的博客文章，其中解释了Wildfly和Undertow的诀窍：

更新：

与此同时，我在microsoft connect上打开了一个错误：

---

如果你想让他们解决问题，请投票支持这个错误。

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

HTTPS，无缓存头

---

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

Apache/2.2.15的工作解决方案是添加.htaccess 它阻止缓存字体文件，即使是https

<FilesMatch "\.(woff)$">
    Header unset Cache-control
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Cache-control
</FilesMatch>

头取消缓存控制
头取消缓存控制

不要将Vary请求头设置为https

无字体加载

Vary:Accept-Encoding,https

有效

Vary:Accept-Encoding

---

答案相同。

我想不出任何具体的方法，但您是否尝试过没有域的URL，或者？尚未尝试协议相关URL，将尝试。没有域或与CSS相关的URL被尝试过，但不幸的是没有工作。你能发现文件正在加载吗？例如，使用Fiddler？我不知道如何在Fiddler中查找或在何处查找。我已经安装好了，似乎正在加载。但是，例如，我的.js文件是绿色的，而字体仍然是黑色的。协议相关URL不起作用，因为字体不会使用我自己的CSS加载，我怀疑它们是否使用webfont loader加载。不过，在normale CSS中，我还可以设置备份字体。。无论如何，我会调查的，你永远不会知道。感谢使用

应用程序/font woff

，否则您将收到警告。解决此问题的一种可能方法是从CDN存储库中提供字体文件！我为这个问题浪费了很多时间。你节省了我的时间！为了解决这个问题，我在.htaccess中配置了头集缓存控制“max age=604800，public”。Header set Pragma“”是的，我可以使用nginx proxy来隐藏Pragma和cache co来克服这个问题