Я использую font-family: Myriad; font-size: 40px для некоторого текста. Я не могу поверить, что IE отображает шрифт в лучшем качестве! Гораздо лучше Opera, Firefox и Chrome.
Как это может быть? Как заставить текст выглядеть так же хорошо в других браузерах, как в IE?
Вот демо:
Попробуйте эту ссылку во всех браузерах. IE (новейшая версия, 9) показывает лучший и самый качественный текст, не так ли?
Проще говоря: это потому, что 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-направления, чтобы сгладить любые зубчатые края.
Чтобы "сделать текст таким приятным, как в IE в других браузерах", вы можете попробовать text-shadow.
text-shadow:0 0 1px #eee;
Живая демонстрация: http://jsfiddle.net/simevidas/55Ruh/5/