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

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

Как есть в ФФ3, ИЕ6, ИЕ7, Опере 10
Как оказалось, шрифты, подгружаемые через @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 вообще пролетают, для них пришлось цвет сделать посерее, чтобы не так заметны были грызанные края.
Стараюсь рекомендовать использовать стандартные шрифты, именно из-за таких проблем и различных отображений в разных браузерах.
Учитывая, что не все заки соглашаются заменять на страндартные шрифты, опыт подгрузки шрифтов уже есть. Поэтому я уже никому ничего не рекомендую. Просто делаю и всё. А потом ставлю перед фактом — шрифты мыльные, дофига весят. Недавно делал проект, там подтягивался мириад в двух видах и люсида. Всё вместе весит 1.5 метра. Хотят — пусть получают.
Перед фактом надо ставить до, а не после выполнения. ;)
Ну, бывают шрифты по 20 кил, а бывают по 300. Бывает, высота строки в подключаемых шрифтах какая-то дурная. А ты пробовал доказать что-то о шрифтах менеджеру студии, когда заказчик отлистал $100к+ за проект и его не гребёт, как это будет сделано, важно, чтобы при наложении скриншота на макет совпадало до +/- 1 пикс.? Единственное, что меня действительно раздражает в подключении шрифтов — это то, что их не прикладывают к макетам.
только сейчас вкурил. SVG — этот формат подтягивается для iOS, а в приведённом примере проверяется браузер на предмет современности и подтягивается SVG-файлик, хоть и неродной, но правильно работающий
В опере не решилась проблема, во всех остальных -ОК)
Не подскажите как быть ?
можно попробовать отдельно для оперы (css хаком) добавить
text-shadow:0px 0px 1px #aaa;
а вообще конечно же надо уже учить дизайнеров не налегать на нестандартные шрифты. от них только лишний головняк для всех…
не помогает, даже уже не знаю как с этим бороться (
во всех ок, а в опере, вот как ломается шрифт
Буду благодарен за подсказку!
Спасибо