MSIE 10、web font 和 font-feature-settings 导致文本不可见答案

【问题标题】：MSIE 10, web font and font-feature-settings causes invisible textMSIE 10、web font 和 font-feature-settings 导致文本不可见
【发布时间】：2014-04-04 19:12:46
【问题描述】：

我认为这确实是 Microsoft Internet Explorer 10 中的一个错误，但我在任何地方都找不到该问题的任何解释。可以在http://jsfiddle.net/37Bu5/ 找到问题的现场演示，代码如下：

<html><head>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400");
.withkerning
{
    font-family: "Open Sans";
    font-feature-settings: "kern" 1;
}
</style>
</head><body>
<p>Here`s some example text 1.</p>
<p class="withkerning">Here`s some example text 2.</p>
</body></html>

问题在于withkerning 类的段落是完全不可见的。我想使用kern（字体紧缩）功能，因为它提高了可读性。

关于如何解决此问题的任何建议？据我所知，这在 MSIE 11.0 版、Firefox 或 Chrome 中无法重现。我宁愿避免使用 JavaScript，因为要么

我使用 JavaScript 应用 font-feature-settings，结果如果浏览器足够快，我会得到难看的文本闪烁而没有字距调整，或者
我保持 CSS 原样并尝试从 MSIE 10 中删除字体功能设置。任何尝试使用 MSIE 10 且未打开 JavaScript 的用户都将获得一个充满缺失文本的页面。

【问题讨论】：

我们今天遇到了这个错误，我们正在加载包含连字的字体并为其启用了font-feature-settings: "liga" 1;，但使用 Google 的 Open Sans 字体覆盖了该元素。事实证明，来自 Google 的版本不包含连字，因此这会导致文本在 IE11 中消失。删除 font-feature-settings 属性可以解决问题。从 Font Squirrel 加载字体的本地副本确实有效并使文本再次出现，因为该版本确实包含连字。
FWIW 在 IE11 中使用 font-smooth 会出现一个非常相似的问题：caniuse.com/#search=font-smooth

标签： html css windows-7 internet-explorer-10 webfonts

【解决方案1】：

我的建议是删除 font-feature-setting 属性，因为它不会使文本更易于阅读。

原因是只有IE支持font-feature-setting。所有其他浏览器都删除了该属性，因此非 IE 浏览器中的文本呈现没有变化。

WebKit 和 Blink 浏览器确实支持带有 webkit 前缀的属性，Firefox 支持带有 moz 前缀的属性，但它们不支持 jsFiddle 中使用的无前缀属性。

如果你必须使用它而不把它交给 IE，你可以添加 moz 和 webkit 前缀并删除无前缀版本，但请记住，它永远不会在 IE 中使用此属性，并且将被丢弃在其他浏览器，如果他们删除了他们的前缀版本。

注意：看起来使用此属性会使文本在 Windows 7 上的 IE10 和 11 中不可见，但在 Windows 8.x 上的 IE10 和 11 中可以正常工作。

【讨论】：

是的，我认为真正的问题是在 Windows 7 字体渲染引擎中不正确处理字距调整表。我将改用text-rendering: optimizeLegibility;，因为that 也应该在所有支持字体字距调整的浏览器中启用字距调整。这似乎不会导致 MSIE 中出现不可见的文本。
IE10 用户现在已降至全球互联网用户的不到 1%。因此，我会保留font-feature-setting: "kern" 1，因为 chrome 和 firefox 在默认情况下如何处理字距调整方面存在差异。在 Chrome 和 IE 中，f.ex 字距调整默认关闭，而在 Firefox 中打开。
我对这个答案投了反对票，因为我认为它已经过时了。

【解决方案2】：

使用 Internet Explorer 10 或 11 的 Windows 7 用户遇到了在使用字体功能设置时导致文本消失的错误。 https://connect.microsoft.com/IE/feedbackdetail/view/831964

Windows 8 用户不会遇到同样的问题。

如果您有很多用户使用 Windows 7，那么只需删除 font-feature-settings 和 -ms-font-feature-settings 即可显示文本。

如果您希望文本在所有其他浏览器中显示相同，我仍然建议您在其他浏览器中打开字距调整。您可以像这样确保向前和向后兼容性：

.kern {
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern=1";
  -o-font-feature-settings: "kern" 1;
  font-kerning: normal;
}

如果您仍想向 Windows 8 和 10 用户显示字距调整，可以使用 javascript。

kern.css：

.kern {
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern=1";
  -o-font-feature-settings: "kern" 1;
  font-kerning: normal;
}

.kern-ie {
  font-feature-settings: "kern" 1;
  -ms-font-feature-settings: "kern=1";
}

kern.js：

var ua = navigator.userAgent.toLowerCase();
var isNotWin7 = ua.indexOf('windows nt 6.1') == 0;
if (isNotWin7) {
    var kernedTextCollection = getElementsByClassName(".kern");
    for(var i = 0; i < kernedTextCollection.length; i++) {
        kernedTextCollection.item(i).className = kernedTextCollection.item(i).className + ' kern-ie';
    }
}

index.html:

<link rel="stylesheet" type="text/css" href="kern.css">
<!--[if IE]>
    <script src="kern.js"></script>
<![endif]-->

【讨论】：

请记住，IE 9 是支持条件 cmets 的最新版本。

【解决方案3】：

这是一个错误：当使用 font-feature-settings css 属性时，导致文本在 IE10 和 IE11 中消失 https://connect.microsoft.com/IE/feedbackdetail/view/831964

【讨论】：

请记住，IE 9 是支持条件 cmets 的最新版本。链接的解决方案对 IE 10 和 IE 11 无效。

【解决方案4】：

我今天遇到了同样的问题，经过一些研究，我得出了这个简单的结论。

移除自定义字距设置，让浏览器决定何时使用字距调整以及何时不使用字距调整。这是默认设置，工作正常。 :-)

【讨论】：