我认为这确实是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应用字体功能设置,因此如果浏览器足够快,我会得到难看的文本闪存而无需字距调整,或者
>我按原样保留CSS并尝试从MSIE 10中删除字体功能设置.任何试图使用MSIE 10查看内容的用户,如果没有启用JavaScript,将会得到一个缺少文本的页面.
解决方法
我的建议是删除font-feature-setting属性,因为它不会使文本更容易阅读.
原因是只有IE支持字体功能设置.所有其他浏览器都在删除该属性,因此非IE浏览器中的文本呈现没有变化.
WebKit和Blink浏览器支持使用webkit前缀的属性,Firefox支持moz前缀,但它们不支持jsFiddle中使用的无前缀.
如果您必须使用它而不是将其提供给IE,您可以添加moz和webkit前缀并删除无前缀版本,但请记住,它将永远不会在IE中使用此属性,并且如果它们将被删除在其他浏览器中永远删除他们的前缀版本.
注意：看起来使用此属性会使文本在Windows 7上的IE10和11中不可见,但在Windows 8.x上的IE10和11中可以正常工作.
