Наверное многие сталкивались с проблемой сглаживания шрифтов в Windows и именно в браузере Chrome. Чаще всего эта проблема преследует акцидентные шрифты. И особо обидно то, что IE9 уже умеет сглаживать шрифты правильно, а Chrome ещё нет.

Проблема заключается (по всей видимости) в том, что MS выпустила нормальный движок сглаживания шрифтов, и использует его в IE9, а Chrome по-прежнему использует встроенный в ОС не совсем удачный движок сглаживания.

С проблемой мы столкнулись, когда повсеместно в сайте использовался шрифт Days. Приятный шрифт для логотипов и заголовков (акцидентальный). Везде (Firefox, Opera, IE) под Windows шрифт отображался отлично, а в Chrome почему-то были какие-то зазубринки и сучки.

Часы поисков в зарубежном интернете на всяких Stackoverflow не принесли результатов.

Какие могут быть решения?

  1. сделать однопиксельную полупрозрачную тень через text-shadow цвета шрифта (чуть размоет контур)
  2. сделать однопиксельную полупрозрачную тень через text-shadow цвета фона (тоже чуть размоет контур)
  3. сделать обводку текста через -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

40
Понравилась или помогла статья?
Купите мне кофеКупите мне кофе