@ font-face不能使用特定版本的Internet Explorer 11 [英] @font-face not working with specific version of Internet Explorer 11
问题描述
我知道有很多类似的问题，但这种情况看起来很奇怪。 @ font-face似乎对于Internet Explorer 11（Windows 7 Pro）损坏。具体来说，版本： 11.0.9600.17728 ，更新版本： 11.0.18 。
对我来说，在Chrome，Firefox，Safari，Opera（适用于Linux和Windows）都很好。事实上，它甚至使用Internet Explorer版本： 11.0.9600.17633 ，更新版本： 11.0.16 ，也可以在不同的计算机上运行Windows 7。 p>
开发人员控制台中没有任何内容表示提取字体时出现问题。我已经简化了我的HTML / CSS下来一些非常基本的东西，以重现这个问题。在下面的情况下，两种自定义字体都不工作（对于特定的IE版本）：
< html&
< head>
< link rel =stylesheettype =text / csshref =test.css/>
< / head>
< body>
< p>此字体应为Roboto Thin< / p>
< p>下面应该有图标。如果没有，则font-face不工作。< / 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：
@charsetUTF-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 '），
url（'roboto-thin-webfont.ttf'）format（'truetype'），
url（'roboto-thin-webfont.svg＃robotothin'）format（'svg'） ;
font-weight：normal;
font-style：normal;
}
@ font-face {
font-family：'typicons';
src：url（'typicons-regular-webfont.ttf'）;
}
p {
font-family：robotothin;
font-size：26px;
color：＃666;
}
span {
font-family：typicons;
font-size：30px;
color：＃0062A8;
}
您可以找到代码运行在这里。
如果我使用IE导致问题的版本查看该页面，文本字体将默认而不是图标，您只能看到 span 标签中的字母。
鉴于@ font-face在我测试的其他浏览器（甚至是不同版本的IE 11）中都工作，这可能是该版本的错误IE，并且有什么我可以做进一步修复或调试。
这可能与安全问题此错误报告中所述的设置。
在安全设置中，转到下载>字体下载。如果它已禁用，那么您需要启用它。
I know there are lots of similar questions but this situation seems really odd. @font-face seems to be broken for Internet Explorer 11 (Windows 7 Pro). Specifically, Version: 11.0.9600.17728, Update Version: 11.0.18.
@font-face is working fine for me on Chrome, Firefox, Safari, Opera (both Linux and Windows, where applicable). In fact, it's even working on Internet Explorer Version: 11.0.9600.17633, Update Version: 11.0.16, also running on Windows 7 on a different machine I have.
There is nothing in the developer console to indicate that there is any problem fetching the fonts. I've simplified my html/css down to some very basic stuff to reproduce the problem. In the case below, neither of the custom fonts are working (for that specific IE version):
<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>
...and the 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: normal;
font-style: normal;
}
@font-face {
font-family: 'typicons';
src: url('typicons-regular-webfont.ttf');
}
p {
font-family: robotothin;
font-size: 26px;
color: #666;
}
span {
font-family: typicons;
font-size: 30px;
color: #0062A8;
}
You can find that code running here.
If I view that page using the version of IE causing problems, the text font will be the default and instead of icons you'll only see the letters in the span tags.
Given that @font-face is working in every other browser I've tested (even different version of IE 11) is this likely to be a bug with that version of IE, and is there anything I can do to fix or debug further?
This could be related to an issue with the Security Settings as described in this bug report.
In Security Settings go to Downloads > Font Downloads. If it's Disabled then you need to Enable it.
这篇关于@ font-face不能使用特定版本的Internet Explorer 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
