我知道有很多类似的问题,但这种情况似乎很奇怪.对于Internet Explorer 11(Windows 7 Pro),@ font-face似乎已损坏.具体来说,版本:11.0.9600.17728,更新版本:11.0.18.
@ font-face在Chrome,Firefox,Safari,Opera(适用于Linux和Windows)上都能正常使用.事实上,它甚至可以在Internet Explorer版本:11.0.9600.17633,更新版本:11.0.16上运行,也可以在我拥有的另一台机器上运行Windows 7.
开发人员控制台中没有任何内容表明提取字体时出现任何问题.我已经将我的html/css简化为一些非常基本的东西来重现问题.在下面的情况中,两种自定义字体都不起作用(对于特定的IE版本):
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<p>This font should be Roboto Thin</p>
<p>There should be icons below. If not, then font-face is not working.</p>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
</body>
</html>
......和CSS:
@charset "UTF-8";
@font-face {
font-family: 'robotothin';
src: url('roboto-thin-webfont.eot');
src: url('roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
url('roboto-thin-webfont.woff') format('woff'),
url('roboto-thin-webfont.ttf') format('truetype'),
url('roboto-thin-webfont.svg#robotothin') format('svg');
font-weight: …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 …我知道似乎已经有人问过这个问题，但是我发现的解决方案仅适用于IE8。
我们在项目中使用Font Awesome 4.1.0和Bootstrap v3.0.3。如果我们是第一次加载页面，则所有图标都会正确呈现。当我们使用Ctrl + R在Internet Explorer中重新加载页面时，它们消失了。
对于我们测试过的所有IE版本（包括IE11），都会出现此问题。
internet-explorer internet-explorer-9 internet-explorer-10 font-awesome internet-explorer-11
我正面临IE浏览器的问题。它正在第一次加载图标。但是，如果我刷新页面，则图标不可见。您能告诉我如何从服务器端解决此问题吗？这与所有浏览器ie11，ie10，ie9刷新后的Font-awesome消失有关。但是它没有完整的解决方案