14

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

4

6 回答 6

8

我对 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 -无缓存

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

于 2014-10-04T15:34:38.680 回答
7

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

HTTPS，无缓存标头

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

于 2015-07-25T02:31:49.763 回答
3

所以，据我所知，我只是想出了一种适用于 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;

}
于 2012-06-23T08:19:51.747 回答
2

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

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

<FilesMatch "\.(eot)$">
    Header unset Cache-control
</FilesMatch>
于 2016-03-25T18:25:37.960 回答
1

你可以使用由 Google 和 Typkit 开发的Webfont-Loader来让它工作：

它增加了一些开销，但也使您可以更好地控制字体加载（例如允许您在尚未加载字体时设置不同样式的类）。也许值得一试，为自己的 css 设置似乎很简单。

于 2012-06-22T14:56:52.170 回答
0

不要将 Vary Request Header 设置为 https

没有字体加载

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

同样的答案在这里。

于 2017-09-02T07:11:04.697 回答