@font-face 不适用于特定版本的 Internet Explorer 11

Question

我知道有很多类似的问题，但这种情况看起来很奇怪。 @font-face 对于 Internet Explorer 11 (Windows 7 Pro) 似乎被破坏了。具体来说，版本：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: 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;
}

你可以找到 code running here.
如果我使用导致问题的 IE 版本查看该页面，文本字体将是默认字体，而不是图标，您只会看到 span 标签中的字母。

考虑到@font-face 在我测试过的所有其他浏览器（甚至是不同版本的 IE 11）中都可以正常工作，这可能是那个版本的 IE 的错误，我能做些什么吗？进一步修复或调试？

Answer 1

这可能与 bug report 中所述的安全设置问题有关。

在 Internet 选项中转到：

安全选项卡
此区域的安全级别
自定义级别
下载
字体下载

如果它被禁用，那么您需要启用它。

Answer 2

如果问题是“@font-face 无法使用特定版本的 Internet Explorer 11”

检查您的字体是否可嵌入：可安装

如果不是embeddability: Installable add installable font 就完美了。

Answer 3

该问题可能与在特定版本的 Internet Explorer 上使用 HTTPS 有关。我发现 版本 11.0.9600.19035，更新版本 11.0.65 运行在 Win 7 上也受到影响。

尽管 Google 声明支持 Microsoft Internet Explorer 版本 6+，但它们的字体会受到与上述相同的影响。

通过 HTTP 提供字体会带来 "mixed content" 警告。接受警告后，字体将显示在受影响的 IE 上，但不会显示在未受影响的 IE 上。

目前我知道没有解决方法，甚至没有通过 HTML/CSS/JavaScript.

检测受影响版本的方法

Answer 4

已通过删除 apache 级别 "eot" 文件的 "Vary" header 修复

<Location ~ \.eot$>
  Header unset Vary
</Location>

@font-face 不适用于特定版本的 Internet Explorer 11

@font-face not working with specific version of Internet Explorer 11

html

css

internet-explorer

font-face