Geek Answers Handbook

MSIE 10, Web Font, and Function-Font Parameters Invoke Invisible Text

I think this is really a bug in Microsoft Internet Explorer 10, but I could not find any explanation of the problem anywhere. A live demonstration of the problem can be found at http://jsfiddle.net/37Bu5/ and here is 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 the withkerning class withkerning completely invisible. I would like to use the kern function (kerning from a font) because it improves readability.

Any suggestions to fix this problem? As far as I know, this does not play with MSIE version 11.0, Firefox or Chrome. I would rather not use javascript because either

  • I apply font-feature-settings using JavaScript and, as a result, I get an ugly flash of text without kerning if the browser is fast enough or
  • I save the CSS as it is and try to remove the font settings from MSIE 10. Any user trying to view the content with MSIE 10 and without JavaScript enabled will get a page with the missing text.
+8
html css windows-7 internet-explorer-10 webfonts
source share
4 answers

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

The reason is that only IE supports font-feature-setting . All other browsers discard the property and, therefore, there is no change in text rendering in browsers other than IE.

WebKit and Blink browsers support the property with the webkit prefix, and Firefox supports it with the moz prefix, but they do not support the prefix used in jsFiddle.

If you must use this and not pass it to IE, you can add moz and webkit prefixes and remove the version without a prefix, but keep in mind that it will never use this property in IE and will be deleted in other browsers if they are or delete your prefix version.

Note. it seems that using this property makes text invisible in IE10 and 11 on Windows 7, but works as expected in IE10 and 11 on Windows 8.x.

+4
source share

This is a mistake: when text disappears in IE10 and IE11 when using the css-function-property-property property https://connect.microsoft.com/IE/feedbackdetail/view/831964

+3
source share

Windows 7 users using Internet Explorer 10 or 11 experience an error that causes text to disappear when using font settings. https://connect.microsoft.com/IE/feedbackdetail/view/831964

Windows 8 users do not experience the same problem.

If you have many users using Windows 7, just removing font-feature-settings and -ms-font-feature-settings will display the text.

I would still advise you to enable kerning in other browsers if you want the text to display the same in all other browsers. You can provide forward and backward compatibility as follows:

 .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 introduce kerning to Windows 8 and 10 users.

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]-->
0
source share

I had the same problem today, and after some research, I came to this simple conclusion.

Remove user kerning settings and allow the browser when to use kerning and when not to use kerning. This is the default setting and works fine. :-)

0
source share

More articles:


All Articles