html – MSIE 10,web字体和字体功能设置会导致不可见的文本

发布时间：2020-12-14 16:36:22 所属栏目：资源来源：网络整理

导读：我认为这确实是Microsoft Internet Explorer 10中的一个错误,但我无法在任何地方找到任何解释.可以在 http://jsfiddle.net/37Bu5/找到问题的现场演示,这里是代码： htmlheadstyle@import url("https://fonts.googleapis.com/css?family=Open+Sans:400");.wit

我认为这确实是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中可以正常工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!