Question

我认为这确实是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的用户将获得一个充满缺失文本的页面。

Answer 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中可以正常工作。

Answer 2

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

Answer 3

使用Internet Explorer 10或11的Windows 7用户遇到的错误会导致文本在使用font-feature-settings时消失。 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]-->

Answer 4

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

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

MSIE 10，Web字体和字体功能设置会导致不可见的文本

4 个答案: