Why does my font look much better in IE9?

蹲街弑〆低调 提交于 2019-12-17 19:34:18

问题


I use font-family: Myriad; font-size: 40px for some text. I can't believe IE displays the font in the best quality! Much better than Opera, Firefox and Chrome.

How can it be? How can I make text look as good in other browsers as in IE?

Here is a demo:

http://jsfiddle.net/55Ruh/3/

Try this link in all browsers. IE (the newest version, 9) shows the best and most quality text, doesn't it?


回答1:


Simply put: this is because IE9 introduces a new font rendering engine that is based largely on that seen in WPF's ClearType implementation. Its enhanced engine does a better job at reducing jagged edges, making fonts look smoother and better, especially at large sizes.

Getting into the details — and I mean to get really technical — this breed of ClearType is different from the one seen in the rest of Windows, also known as GDI ClearType (for Windows' GDI graphics library). The old GDI ClearType is the one that Windows versions of most other browsers base their font rendering engines off, which is also the one that makes fonts look really jaggy in large sizes.

The following paragraph from the second link summarizes most of the rest of its content, that explains quite nicely why fonts look smoother in IE9's new engine:

A significant improvement over the previous version of ClearType is the use of sub-pixel positioning. Unlike the ClearType implementation found in GDI, the ClearType found in Windows Presentation Foundation (WPF) allows glyphs to start within the pixel and not just the beginning boundary of the pixel. Because of this extra resolution in positioning glyphs, the spacing and proportions of the glyphs is more precise and consistent.

See, especially, the section on Y-direction anti-aliasing with screenshots for comparison. Another quote:

ClearType in Windows Presentation Foundation (WPF) provides antialiasing on the y-direction level to smooth out any jagged edges.




回答2:


To "make text so nice as in IE in other browsers", you could try text-shadow.

text-shadow:0 0 1px #eee;

Live demo: http://jsfiddle.net/simevidas/55Ruh/5/



来源:https://stackoverflow.com/questions/5794296/why-does-my-font-look-much-better-in-ie9

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!