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

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

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

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

Как есть в ФФ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 вообще пролетают, для них пришлось цвет сделать посерее, чтобы не так заметны были грызанные края.

Оценить:|
  
Комментировать
Раздел: Браузеры    
Просмотров: 5813
Комментариев (9)
  1. Greg
    Григорий Кочнев [Greg]
    02.08.2011 в 18:11

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

    • Deff
      Андрей Данилов [Deff]
      02.08.2011 в 19:13

      Учитывая, что не все заки соглашаются заменять на страндартные шрифты, опыт подгрузки шрифтов уже есть. Поэтому я уже никому ничего не рекомендую. Просто делаю и всё. А потом ставлю перед фактом — шрифты мыльные, дофига весят. Недавно делал проект, там подтягивался мириад в двух видах и люсида. Всё вместе весит 1.5 метра. Хотят — пусть получают.

  2. Deff
    Андрей Данилов [Deff]
    02.08.2011 в 23:10

    Ну, бывают шрифты по 20 кил, а бывают по 300. Бывает, высота строки в подключаемых шрифтах какая-то дурная. А ты пробовал доказать что-то о шрифтах менеджеру студии, когда заказчик отлистал $100к+ за проект и его не гребёт, как это будет сделано, важно, чтобы при наложении скриншота на макет совпадало до +/- 1 пикс.? Единственное, что меня действительно раздражает в подключении шрифтов — это то, что их не прикладывают к макетам.

  3. Deff
    Андрей Данилов [Deff]
    01.09.2011 в 22:50

    только сейчас вкурил. SVG — этот формат подтягивается для iOS, а в приведённом примере проверяется браузер на предмет современности и подтягивается SVG-файлик, хоть и неродной, но правильно работающий

  4. maxmsmax
    02.10.2012 в 22:04

    В опере не решилась проблема, во всех остальных -ОК)
    Не подскажите как быть ?

  5. wyzemind
    12.10.2012 в 22:32

    а вообще конечно же надо уже учить дизайнеров не налегать на нестандартные шрифты. от них только лишний головняк для всех…

  6. maxmsmax
    13.10.2012 в 12:43

    не помогает, даже уже не знаю как с этим бороться (
    во всех ок, а в опере, вот как ломается шрифт
    Буду благодарен за подсказку!
    Спасибо

    784_oprchjpg

Оставить комментарий