Html @font-face 不适用于特定版本的 Internet Explorer 11
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30174622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face not working with specific version of Internet Explorer 11
提问by RTF
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 对于 Internet Explorer 11 (Windows 7 Pro) 似乎已损坏。具体来说，版本：11.0.9600.17728，更新版本：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.
@font-face 在 Chrome、Firefox、Safari、Opera（适用于 Linux 和 Windows）上对我来说工作正常。事实上，它甚至可以在 Internet Explorer 版本：11.0.9600.17633，更新版本：11.0.16 上运行，也在我拥有的另一台机器上的 Windows 7 上运行。
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/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>
...and the CSS:
...和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 spantags.
您可以在此处找到运行的代码。
如果我使用导致问题的 IE 版本查看该页面，则文本字体将是默认字体，您将只看到span标签中的字母而不是图标。
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?
鉴于@font-face 在我测试过的所有其他浏览器（甚至是不同版本的 IE 11）中都可以使用，这可能是该版本 IE 的一个错误，我能做些什么来进一步修复或调试吗？
采纳答案by BSMP
This could be related to an issue with the Security Settings as described in this bug report.
这可能与此错误报告中所述的安全设置问题有关。
In Internet Options go to:
在 Internet 选项中转到：
- The Security Tab
- Security level for this zone
- Custom level
- Downloads
- Font Download
- 安全选项卡
- 此区域的安全级别
- 自定义级别
- 下载
- 字体下载
If it's Disabled then you need to Enable it.
如果它被禁用，那么你需要启用它。
回答by Thilina Dharmasena
If issue is "@font-face not working with specific version of Internet Explorer 11"
如果问题是“@font-face 不适用于特定版本的 Internet Explorer 11”
Check whether your font embeddability: Installable
检查您的字体是否可嵌入：可安装
If it is not embeddability: Installable add installable font then it will work perfectly.
如果它不是可嵌入性：可安装添加可安装字体，那么它将完美运行。
回答by jofeu
The problem may be related to using HTTPS on specific versions of Internet Explorer. I have found that Version 11.0.9600.19035, Update version 11.0.65running on Win 7 is also affected.
该问题可能与在特定版本的 Internet Explorer 上使用 HTTPS 相关。我发现在 Win 7 上运行的版本 11.0.9600.19035，更新版本 11.0.65也受到影响。
Even though Google states to support Microsoft Internet Explorer version 6+, their fonts are affected in the same way as described above.
即使 Google 声明支持 Microsoft Internet Explorer 版本 6+，它们的字体也会以与上述相同的方式受到影响。
Serving the font via HTTP will bring a "mixed content" warning. After accepting the warning, the font will display on affected IEs, but NOT on unaffected ones.
通过 HTTP 提供字体将带来“混合内容”警告。接受警告后，字体将显示在受影响的 IE 上，但不会显示在未受影响的 IE 上。
Currently I know of no workaround, not even a way of detecting affected versions via HTML/CSS/JavaScript.
目前我知道没有解决方法，甚至没有通过 HTML/CSS/JavaScript 检测受影响版本的方法。
回答by Evgeny Konstantinov
Fixed by removing of the "Vary" header for the "eot" files on apache level
通过在 apache 级别删除“eot”文件的“Vary”标头来修复
<Location ~ \.eot$>
Header unset Vary
</Location>
