MSIE 10, web font and font-feature-settings causes invisible text

StackOverflow https://stackoverflow.com/questions/22151835

Frage

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>

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.

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

  1. I apply font-feature-settings using JavaScript and as a result I get ugly flash of text without kerning if browser is fast enough, or
  2. 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.
War es hilfreich?

Lösung

My suggestion is to remove the font-feature-setting property, as it is not making the text easier to read.

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 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.

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.

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.

Andere Tipps

This is a bug: causing text to disappear in IE10 and IE11 when the font-feature-settings css property is used https://connect.microsoft.com/IE/feedbackdetail/view/831964

Windows 7 users using Internet Explorer 10 or 11 are experiencing a bug that causes text to disappear when font-feature-settings are utilized. https://connect.microsoft.com/IE/feedbackdetail/view/831964

Windows 8 users do not experience the same issue.

If you have a lot of users using Windows 7 then simply removing font-feature-settings and -ms-font-feature-settings will cause the text to display.

I would still advice you to turn kerning on in the other browsers if you want text to display the same in all other browsers. You can ensure forward and backward compatibility like this:

.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;
}

You can use javascript if you still want to present windows 8 and 10 users with kerning.

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]-->

I had the same issue today and after doing some research I came to this simple conclusion.

Remove custom kerning settings and let the browser decide, when to use kerning and when not to use kerning. It is the default setting and is working just fine. :-)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top