IE 9 does not use sub-pixel antialiasing under certain conditions

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

سؤال

[Original title: IE 9 text renders very poorly; is there a workaround?)

IE 9 is rendering the text in my application very poorly. The problem is not in my monitor's Clear Type settings, since IE 9 in compatibility mode, Firefox, and Chrome all render text nicely. Here's a side-by-side comparison of how the text is rendered with IE 9, IE 9 in compatibility mode, and Chrome:

IE 9

IE 9 Compatibility Mode

enter image description here

I tried applying this answer, but it doesn't seem to apply to anything after IE 7. Does anybody know of any workarounds we can apply to our site to fix IE 9's bad text rendering?

Edit:

I've boiled down the problem page to the bare essentials. As you can see, it doesn't take much to reproduce. Be sure that IE has a browser mode if IE9 and document mode of IE9 standards:

<html xmlns="http://www.w3.org/1999/xhtml">
  <body style="background-color: rgb(30, 34, 59); color: rgb(255, 85, 0); font-size: 20px">
    Home
  </body>
</html>
هل كانت مفيدة؟

المحلول

It seems setting opacity:.9999 on body renders the text in IE9 standards mode a lot more similar to how it does in Quirks mode.

نصائح أخرى

Short answer: this is an issue when you specify font sizes in pt (points), rather than pixels.

So what happens is that the new IE9 rendering engine uses DirectWrite, which won't snap to the nearest pixel as it did with GDI+, so if your pt size doesn't map to a whole pixel number, it will draw it exactly that way, which makes it appear blurry.

The IE8 compatibility mode wouldn't suffer this issue as it uses regular GDI rendering that we are used to.

So check out all your style sheets etc and if you are asking for point size font's, that's exactly what will be given in IE9, and depending on your font used etc, your point size might or might not map to a crisp and clear size.

This is explained in detail here:

IE9 in standard mode uses sub-pixel addressing for text. One can say that it "smooths out" text characters, or you can say the reverse, i.e. it "blurs out" the characters. It is essentially the same thing.

Personally I do not find any easily-perceivable differences between your three images, and actually prefer the first one. However, it depends on personal preferences.

I've searched the web a bit, and it doesn't seem to be a way to cleaning turn off sub-pixel rendering on IE9. This link might interest you: Disable Cleartype (text anti-aliasing) in IE9

In WPF, there is an option to turn off sub-pixel font rendering and force letters to "snap to pixels". But IE9 doesn't seem to have such a switch.

However, my recommendation is: is it that big a problem that you'd want to do it in the first place? If sub-pixel text rendering gives you very ugly output on your site (are you using lots of very small type?), perhaps you'll need to rethink your site layout in the first place. Type that is so small that sub-pixel rendering makes them unclear is best avoided in a web site.

And there is no telling when other browsers will add sub-pixel rendering to text in the future -- in fact FF4 already uses Direct2D, but may not be using DirectWrite.

Internet Explorer 9 seems to stop using sub-pixel antialiasing under really random conditions. For example, here is another example that triggers it (I assume there are more):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<TITLE></TITLE>
<BODY>
Outside the div - with sub-pixel AA. :)
<div style="border-radius: 1px; overflow: hidden;">
Inside the div - no sub-pixel AA. :(
</div>
</BODY></HTML>

The text inside the div will not be rendered with sub-pixel ("colored") anti-aliasing, but the text outside of it will. Both the border-radius and the overflow declarations are necessary to trigger the bug.

(Can someone please try if it happens on their system and leave a comment? I'd be interested to know if the bug is only triggered on certain system configurations.)

If you switch the Document Mode in the IE Developer Tools to anything but "IE9 standards", the issue disappears.

I'm personally almost willing to live with it, but if it really bothers you I'd suggest stripping down your stylesheet step by step to track down what triggers it.

The only way I can make the fonts look good is to fall back to IE8 functionality via:

<meta http-equiv="x-ua-compatible" content="IE=8" />

The Microsoft update http://support.microsoft.com/kb/2545698 had already been installed, and I already use font-size: 11px;

The opacity:.9999 solution was better then nothing, but not as good as what the IE8 mode shows.

ClearType font rendering is used in all IE9 document modes; sub-pixel positioning is used only in IE9’s default standards mode. IE9’s compatibility modes—Quirks, 7, and 8—use whole-pixel text metrics.

So try switching your doctype to use Quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or one of the compatibility modes.

More info from MSDN

If you need to use IE and you hate that smoothing like on this image http://i.stack.imgur.com/SViG0.png Try turn ON Compatibility View (ALT+T to show Tools menu)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top