Наверное многие сталкивались с проблемой сглаживания шрифтов в Windows и именно в браузере Chrome. Чаще всего эта проблема преследует акцидентные шрифты. И особо обидно то, что IE9 уже умеет сглаживать шрифты правильно, а Chrome ещё нет.
Проблема заключается (по всей видимости) в том, что MS выпустила нормальный движок сглаживания шрифтов, и использует его в IE9, а Chrome по-прежнему использует встроенный в ОС не совсем удачный движок сглаживания.
С проблемой мы столкнулись, когда повсеместно в сайте использовался шрифт Days. Приятный шрифт для логотипов и заголовков (акцидентальный). Везде (Firefox, Opera, IE) под Windows шрифт отображался отлично, а в Chrome почему-то были какие-то зазубринки и сучки.
Часы поисков в зарубежном интернете на всяких Stackoverflow не принесли результатов.
Какие могут быть решения?
- сделать однопиксельную полупрозрачную тень через text-shadow цвета шрифта (чуть размоет контур)
- сделать однопиксельную полупрозрачную тень через text-shadow цвета фона (тоже чуть размоет контур)
- сделать обводку текста через -webkit-text-stroke
Ни один из этих вариантов нас не строил, так как визуально сильно утяжелял буквы.
Где же выход?
Решение пришло очень очевидное. Chrome хорошо и самостоятельно рендерит SVG. Значит нужно заставить Chrome брать шрифт из SVG файла, а не из TTF (шрифты подключались пакетом TTF, EOT, SVG, WOFF).
/*Подключаем шрифт для всех браузеров Firefox, Opera, IE, Chrome, Safari.*/
@font-face {
font-family: 'DaysRegular';
src: url('fonts/days-webfont.eot');
src: url('fonts/days-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/days-webfont.woff') format('woff'),
url('fonts/days-webfont.ttf') format('truetype'),
url('fonts/days-webfont.svg#DaysRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/*Перекрываем font-face для Chrome, так чтобы он брал шрифт только в формате SVG*/
@media all and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'DaysChrome';
src: url('fonts/days-webfont.svg#DaysRegular') format('svg');
font-weight: normal;
font-style: normal;
}
}
И это сработало! Действительно шрифт стал нормально сглаженным. Прямо как на MacOS.
UPD: более правильное решение проблемы http://habrahabr.ru/post/166291/#UPD