@font-face. Сглаживание бывает разное

[02.08.2011 | 17:19]

Недавно столкнулся с таким глюком: шрифт Helvetica Neue после шрифтобелки выглядит в разных браузерах коряво.

Как должно быть

Как есть в ФФ3, ИЕ6, ИЕ7, Опере 10

Нормально было только в ФФ4+.

Как оказалось, шрифты, подгружаемые через @font-face по-разному отрабатываются разными браузерами, и, чтобы навести порядок, нужно задавать различные параметры.
Вот, что предложила дизайнер (чуть не сгорел со стыда:) )

подгружаем как обычно

@font-face {


    font-family: 'HelveticaNeueCyrThin';


    src: url('fonts/helveticaneuecyr-thin-webfont.eot');


    src: url('fonts/helveticaneuecyr-thin-webfont.eot?#iefix') format('embedded-opentype'),


         url('fonts/helveticaneuecyr-thin-webfont.woff') format('woff'),


         url('fonts/helveticaneuecyr-thin-webfont.ttf') format('truetype'),


         url('fonts/helveticaneuecyr-thin-webfont.svg#HelveticaNeueCyrThin') format('svg');


    font-weight: normal;


    font-style: normal;


}

селективно настраиваем

/*Для Хрома и Оперы*/


@media screen and (-webkit-min-device-pixel-ratio:0) {  


        @font-face {


            font-family: 'HelveticaNeueCyrThin';


            src: url('fonts/helveticaneuecyr-thin-webfont.eot');


            src: url('fonts/helveticaneuecyr-thin-webfont.svg#HelveticaNeueCyrThin') format('svg');


        }


        /* ну и ещё какие-нибудь свойства можно позадавать */


}

Т.е. ИЕ6 и ИЕ7 вообще пролетают, для них пришлось цвет сделать посерее, чтобы не так заметны были грызанные края.

Оценить: + | – 0 Комментировать

Раздел: Браузеры
Теги: @font-face , сглаживание , кроссбраузерно , Не стандартные шрифты
Просмотров: 971

Комментарии (5):

Григорий Кочнев [Greg] [02 августа 18:11]

Стараюсь рекомендовать использовать стандартные шрифты, именно из-за таких проблем и различных отображений в разных браузерах.