MSIE 10，网络字体和字体功能设置导致不可见的文本 [英] MSIE 10, web font and font-feature-settings causes invisible text
问题描述
我认为这确实是一个在Microsoft Internet Explorer 10中的错误，但我找不到任何地方的任何解释的问题。有关问题的现场演示可以在 http://jsfiddle.net/37Bu5/ 找到，其代码如下：
I think this is really a bug in Microsoft Internet Explorer 10 but I could not find any explanation of the issue anywhere. A live demo of problem can be found at http://jsfiddle.net/37Bu5/ and here's the code:
<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 （字体字体调整）功能，因为它提高了可读性。
The problem is that the paragraph with class withkerning is totally invisible. I would like to use the kern (kerning from the font) feature because it improves readability.
关于如何解决此问题的任何建议？据我所知，这是不能重现与MSIE版本11.0，Firefox或Chrome。我希望避免使用JavaScript，因为
Any suggestions about how to workaround this problem? As far as I know, this is not reproducible with MSIE version 11.0, Firefox or Chrome. I would prefer to avoid using JavaScript because either
- 我应用
font-feature-settings使用JavaScript，因此如果浏览器速度足够快，我就会得到丑陋的文本，而不会缩小。 - 我按原样保留CSS，并尝试删除font-feature-settings来自MSIE 10.任何试图用MSIE 10查看内容且未启用JavaScript的用户都会看到一个缺少文本的页面。
- I apply
font-feature-settingsusing JavaScript and as a result I get ugly flash of text without kerning if browser is fast enough, or - I keep the CSS as-is and try to remove the font-feature-settings from MSIE 10. Any user trying to view the content with MSIE 10, and without JavaScript turned on, will get a page full of missing text.
推荐答案
我的建议是删除 font-feature-setting 属性，因为它不会使文本更容易阅读。
My suggestion is to remove the font-feature-setting property, as it is not making the text easier to read.
原因是只有IE支持 font-feature-setting 。所有其他浏览器都删除该属性，因此在非IE浏览器中文本呈现没有任何变化。
The reason is that only IE supports font-feature-setting. All other browsers are dropping the property, and thus there is no change to text rendering in non-IE browsers.
WebKit和Blink浏览器支持带有webkit前缀的属性，Firefox支持moz前缀，但是它们不支持jsFiddle中使用的无前缀。
WebKit and Blink browsers do support the property with a webkit prefix, and Firefox supports it with a moz prefix, but they do not support the prefixless one used in the jsFiddle.
如果你必须使用这个而不是给IE，您可以添加moz和webkit前缀并删除无前缀版本，但请记住，它将永远不会在IE中使用此属性，如果他们删除其前缀版本，将删除其他浏览器。
If you must use this and not give it to IE, you could add the moz and webkit prefixes and remove the prefixless version, but bear in mind that it will then never use this property in IE, and will be dropped in other browsers if they ever remove their prefixed version.
注意：看起来像使用此属性使得文本在Windows 7上的IE10和11中不可见，但在Windows 8.x上的IE10和11中正常工作。
Note: it looks like using this property makes the text invisible in IE10 and 11 on Windows 7, but works as expected in IE10 and 11 on Windows 8.x.
这篇关于MSIE 10，网络字体和字体功能设置导致不可见的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
