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

Posted 2023-03-06

技术标签:

【中文标题】@font-face 不适用于特定版本的 Internet Explorer 11【英文标题】：@font-face not working with specific version of Internet Explorer 11 【发布时间】：2015-07-22 08:49:40 【问题描述】：

我知道有很多类似的问题，但这种情况似乎很奇怪。对于 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 上运行。 p>

开发者控制台中没有任何内容表明获取字体有任何问题。我已经将我的 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 的错误，我可以做些什么来修复或进一步调试？

【问题讨论】：

哪个不工作？ typicons 或 robotothin ? 两者，所以 font-face 似乎完全坏了。不是那个特定版本的 IE 中的错误，而是与该浏览器的设置有关（或者可能是机器运行的网络）。我正在运行 11.0.18（构建结束于 17728），它对我有用。对于未来的读者：这可能与 HTTP 缓存头有关；见***.com/questions/31291414/… 【参考方案1】：

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

在 Internet 选项中转到：

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

如果已禁用，则需要启用它。

【讨论】：

在自动更新完成之前它工作正常。因此，IE 在更新到此最新版本期间禁用了该字体下载选项。荒谬的。但它不会对其他人做同样的事情，导致字体对每个人都破坏吗？我会这样认为，至少对于进行更新的人来说是这样，但我不确定。我启用了“字体下载”，但运行 [1]：redbrick.dcu.ie/~elzilcho/font-test/test.html 上面链接中的示例代码在 IE 11 [1] 上仍然失败：redbrick.dcu.ie/~elzilcho/font-test/test.html【参考方案2】：

如果问题是“@font-face 不适用于特定版本的 Internet Explorer 11”

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

如果不是embeddability: Installable 添加可安装字体，那么它将完美运行。

【讨论】：

【参考方案3】：

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

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

通过 HTTP 提供字体会带来“混合内容”警告。接受警告后，字体将显示在受影响的 IE 上，但不会显示在未受影响的 IE 上。

目前我知道没有解决方法，甚至没有通过 HTML/CSS/javascript 检测受影响版本的方法。

【讨论】：

在版本 11.0.9600.18163 的旧 Windows 7 VM 中存在相同问题，更新版本 11.0.27，KB3124275，在“关于”对话框中 links to a January 2016 update refers to an old security bulletin。然而，在办公室不知何故，这个问题似乎已经从本周开始对我们来说。该字体是从同一域上的子文件夹加载的，并且最近没有更改。但也许有些标题确实发生了变化。更多有趣的事实：安装 11.0.9600.10035 和更新版本 11.0.66 documented as June 12th 时一切正常，您在回答中提到这很麻烦。当从另一个具有 11.0.9600.19080、更新版本 11.0.70、July 10th 的网络访问同一个网站时，会出现问题。所以我猜是我们网络中的某些东西导致了问题，而不是 IE11 的版本。确实，对我们来说与任何特定版本无关，而是与标题的更改有关；见***.com/questions/31291414/…【参考方案4】：

通过删除 apache 级别的“eot”文件的“Vary”标头进行修复

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

【讨论】：

以上是关于@font-face 不适用于特定版本的 Internet Explorer 11的主要内容，如果未能解决你的问题，请参考以下文章

@font-face 不适用于斜体/粗体字体

font-face 不适用于汇总配置 - 组件库

java Codingbat notAlone——为啥它不适用于这个特定的例子

XCode自动完成不适用于Objective C中的特定项目

字体重量不适用于下载的字体

SignalR 不适用于 Windows 集成身份验证