Почему мой шрифт выглядит намного лучше в IE9?

Я использую font-family: Myriad; font-size: 40px для некоторого текста. Я не могу поверить, что IE отображает шрифт в лучшем качестве! Гораздо лучше Opera, Firefox и Chrome.

Как это может быть? Как заставить текст выглядеть так же хорошо в других браузерах, как в IE?

Вот демо:

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

Попробуйте эту ссылку во всех браузерах. IE (новейшая версия, 9) показывает лучший и самый качественный текст, не так ли?

Ответы

Ответ 1

Проще говоря: это потому, что IE9 представляет новый механизм рендеринга шрифтов, который основан в основном на том, что наблюдается в Реализация WPF ClearType. Его усовершенствованный движок лучше справляется с уменьшением зубчатых краев, делая шрифты более гладкими и лучшими, особенно при больших размерах.

Входя в детали - и я хочу получить действительно техническую - эта порода ClearType отличается от той, что видна в остальной части Windows, также известной как GDI ClearType (для графической библиотеки GDI для Windows). Старый GDI ClearType - тот, который Windows версии большинства других браузеров основывают на своих механизмах рендеринга шрифтов, а также тот, который заставляет шрифты выглядеть очень неровными в больших размерах.

В следующем абзаце второй ссылки содержится основная часть остальной части ее содержания, которая объясняет, что шрифты выглядят более гладкими в новом движке IE9:

Значительное улучшение по сравнению с предыдущей версией ClearType - это использование подпиксельного позиционирования. В отличие от реализации ClearType, обнаруженной в GDI, ClearType, найденный в Windows Presentation Foundation (WPF), позволяет запускать глифы внутри пикселя, а не только начальную границу пикселя. Из-за этого дополнительного разрешения в позиционировании глифов, расстояние и пропорции глифов являются более точными и согласованными.

См., в частности, раздел Y-direction anti-aliasing со скриншотами для сравнения. Другая цитата:

ClearType в Windows Presentation Foundation (WPF) обеспечивает сглаживание на уровне y-направления, чтобы сгладить любые зубчатые края.

Ответ 2

Чтобы "сделать текст таким приятным, как в IE в других браузерах", вы можете попробовать text-shadow.

text-shadow:0 0 1px #eee;

Живая демонстрация: http://jsfiddle.net/simevidas/55Ruh/5/