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


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种未在主页上使用。


5646
2018-06-21 09:28


起源

我想不出任何具体的内容,但是你尝试过没有域名的网址,或者 协议相对URL ? - RoToRa
尚未尝试过协议相关的URL,会尝试。没有域或相对于CSS的URL被尝试,并且不幸地不起作用 - Joshua - Pendo
你能发现文件正在加载,例如Fiddler? - RoToRa
我不知道如何或在哪里看小提琴手。我已经安装它,它似乎正在加载。但是,我的.js文件例如颜色为绿色而字体保持黑色。 - Joshua - Pendo
协议相对URL也不起作用 - Joshua - Pendo


答案:


绝对有同样的问题。 IE(在我们的案例版本11 / Trident 7中)的组合在所有条件满足时发生错误:

HTTPS,无缓存标头

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


4
2017-07-25 02:31



解决该问题的一种可能方法是从CDN提供字体文件 - echen
谢谢!我在这个问题上失去了很多时间。你节省了我的时间!为了解决这个问题,我在.htaccess中配置为Header设置Cache-Control“max-age = 604800,public”。标题集Pragma“” - Nguyen Van Vinh
是的,我可以使用nginx代理来隐藏问题,以隐藏由spring-boot生成的pragma和缓存控制头,这些头阻止了浏览器中的缓存:链接 - user1767316
这个答案值得更多关注。谢谢你为我节省了大量时间! - Thijs van Dien


我和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-no-cache

如果您希望他们解决问题,请投票支持该错误。


3
2017-10-04 15:34





所以,就我所见,我只想出了一种适用于IE,Safara,Firefox和Chrome的方法。

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

我重新上载了我的字体,选择了导出模式。在设置字段底部的某处,它显示“Base64 Encode”,幸运的是我知道这意味着什么(我可以想象有人不容易看到这个选项)所以我用base64嵌入字体生成我的CSS文件。

这完美无瑕。当然,这使我的CSS文件更大(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;

}

2
2018-06-23 08:19



使用 application/font-woff,或者你会得到 资源解释为Font但使用MIME类型application / x-font-woff进行传输 警告。 - Rob W


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

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

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

2
2018-03-25 18:25



[link](使用nginx):隐藏Cache-control和Pragma:no-cache - user1767316


你可以使用它来使用它 web字体,装载机,由Google和Typkit开发:

它增加了一些开销,但是你也可以更好地控制字体加载(比如允许你在字体尚未加载时设置不同样式的类)。也许值得一试, 你自己的CSS的设置似乎很简单


1
2018-06-22 14:56



由于字体不会使用我自己的CSS加载,我怀疑他们使用webfont加载器加载。但是,在normale CSS我也可以设置一个备用字体..无论如何我都会看看这个,你永远不会知道。谢谢 - Joshua - Pendo
太糟糕了,没有工作:( IE仍然有点b * tch :( - Joshua - Pendo


不要将Vary Request Header设置为https

没有字体加载

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

答案相同 这里


0
2017-09-02 07:11