发表新帖
发表新帖

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

后端 未结
关注
7 1281
野趣味
野趣味 2020-12-01 11:26

[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

相关标签:
7条回答
  • 忘了有多久
    2020-12-01 11:29

    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's blurry font text - www.hanselman.com/blog/TheUltimateGuideOfFiveThingsForNewIE9UsersWhoFearChange.aspx
    0 讨论(0)
  • Happy的楠姐
    2020-12-01 11:41

    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.

    0 讨论(0)
  • 生来不讨喜
    2020-12-01 11:41

    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.

    0 讨论(0)
  • 名媛妹妹
    2020-12-01 11:43

    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

    • IE9’s Document Modes and JavaScript

    • Sub-pixel Fonts in IE9

    • Internet Explorer 9 Guide for Developers

    • Internet Explorer 9 Compatibility Cookbook

    • IE’s Compatibility Features for Site Developers

    • Testing sites with Browser Mode vs. Doc Mode

    • Defining Document Compatibility

    0 讨论(0)
  • 情歌与酒
    2020-12-01 11:44

    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.

    0 讨论(0)
  • 野趣味
    2020-12-01 11:54

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题