CODEWITHSUNDEEP
htmlinternet-explorer-9
Cory Nickerson
Cory Nickerson

Reputation: 893

Cross-browser font issue

I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.

Example

Upvotes: 2

Views: 298

Answers (2)

Pankaj Parashar
Pankaj Parashar

Reputation: 10192

It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.

Microsoft says,

Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations

However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.

Upvotes: 1

icramc
icramc

Reputation: 248

The font rendering is dependent not only to the browser but also the operating system. Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:

http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Upvotes: 1

Related Questions