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

Posted 2023-03-06

【中文标题】@Font-Face 不会在 IE 中通过 https 加载

【英文标题】：@Font-Face won't load via https in IE

【发布时间】：2012-06-23 12:25:46

【问题描述】：

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 中的相对路径，但这也没有用。

所有字体都在域上，没有一个是跨域的。

我在 SO 上遇到了另外 2 篇描述类似问题的帖子，其中一篇未解决，另一篇已解决，但似乎不是同一个问题。在这种情况下，问题的作者必须将 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 中刷新页面，系统会提示我存在不安全内容的消息，并且我可以选择接受此内容。如果我选择“是”，我的内容正在加载并且...字体可用！！耶.. 但是.. 如果我将它改回 https，字体会再次消失。

不确定我能从中学到什么（哈哈），但也许这会给任何人一些想法..

UPDATE 22-06-2012 #2:

到目前为止我已经尝试过：

url('//protocol/relative/font.eot'); url('../file/relative/font.eot'); url('/domain/relative/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 控制台日志”。我可以清楚地看到字体正在被请求 -over https- 并带有 200 OK 响应。奇怪的是我只看到我使用的 4 种字体中的 3 种，但可能第 4 种没有在主页上使用。

【问题讨论】：

我想不出任何具体的东西，但是您是否尝试过没有域的 URL 或 protocol relative URLs ？

尚未尝试过协议相对 URL，将尝试。没有域或与 CSS 相关的 URL 已尝试过，但不幸的是没有工作

你能找出文件正在被加载，例如使用 Fiddler 吗？

我不知道如何或在哪里查看提琴手。我已经安装了它，它似乎正在加载。但是，我的 .js 文件例如颜色为绿色，而字体保持黑色..

协议相对 URL 也不起作用

【参考方案1】：

您可以使用由 Google 和 Typkit 开发的 Webfont-Loader 来使其工作：

它增加了一些开销，但也让您可以更好地控制字体加载（例如允许您在尚未加载字体时设置不同样式的类）。或许值得一试，setup for your own css seems to be simple。

【讨论】：

由于字体不会使用我自己的 CSS 加载，我怀疑它们是否使用 webfont 加载器加载。但是，在普通 CSS 中，我还可以设置备用字体。无论如何，我会看看这个，你永远不会知道。谢谢

【参考方案2】：

所以，据我所知，我只是想出了一种适用于 IE、Safari、Firefox 和 Chrome 的方法。

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

我重新上传了我的字体并选择了导出模式。设置字段底部的某处显示“Base64 编码”，幸运的是我知道这意味着什么（我可以想象有人不会轻易查看此选项）所以我使用 base64 嵌入字体生成了我的 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;

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;

【讨论】：

使用application/font-woff，否则您将收到Resource interpreted as Font but transferred with MIME type application/x-font-woff 警告。

【参考方案3】：

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

更新：

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

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

【参考方案4】：

肯定有同样的问题。 IE 组合（在我们的例子中是版本 11/Trident 7）当所有条件都满足时会出现错误：

HTTPS，无缓存标头

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

【讨论】：

解决此问题的一种可能方法是从 CDN 提供字体文件

谢谢！我为这个问题浪费了很多时间。你节省了我的时间！为了解决这个问题，我在 .htaccess 中配置为 Header set Cache-Control "max-age=604800, public"。标头集 Pragma ""

是的，我可以克服这个问题，使用 nginx 代理隐藏由 spring-boot 生成的防止在浏览器中缓存的编译指示和缓存控制标头：link

这个答案值得更多关注。感谢您为我节省了大量时间！

【参考方案5】：

Apache/2.2.15 的工作解决方案是添加 .htaccess 它甚至可以防止对 https 进行缓存字体文件

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

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

【讨论】：

[link]（使用 nginx）：同时隐藏 Cache-control 和 Pragma：no-cache

【参考方案6】：

不要将 Vary Request Header 设置为 https

不加载字体

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

同样的答案here。