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

  • Z时代
  • 2024-01-10
  • 分类：问答

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：

我还尝试创建一个重写器，将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种。

回答：

因此，据我所知，我只是想出了一种适用于IE，Safara，Firefox和Chrome的方法。

由于我尝试的所有方法都无法解决，因此我试图找到一种可以将字体“嵌入”网站，CSS或服务器的方法。根据我的服务器专家的说法，将字体添加到服务器不是一种选择，因此我决定返回Font-

Squirrel，看看他们是否提供了转换字体的选项。

我重新上传了字体，选​​择了导出模式。幸运的是，我在设置字段底部的某个位置显示“ Base64

Encode”，我知道这是什么意思（我可以想象有人不轻易查看此选项），所以我使用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;
}

以上是 @ Font-Face不会通过IE中的https加载 的全部内容， 来源链接： utcz.com/qa/411723.html

回到顶部