@fontface FireFox (10) делает текст очень жирным - PullRequest
Новая
       37

@fontface FireFox (10) делает текст очень жирным

3 голосов
/ 13 марта 2012

Я реализовал шрифт в css с @ font-face, и он выглядит намного толще при загрузке в Safari.Кто-нибудь знает, что может вызвать это? 

@font-face {
    font-family: 'SerifaBold';
    src: url('/css/serifbol-webfont.eot');
    src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/serifbol-webfont.woff') format('woff'),
         url('/css/serifbol-webfont.ttf') format('truetype'),
         url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
    font-weight: 100;
    font-style: normal;

}

Ответы [ 4 ]

5 голосов
/ 14 марта 2012

Ваше правило шрифта говорит браузеру, что это сверхлегкий шрифт (часть font-weight: 100).Тогда вы, вероятно, просите браузер использовать этот шрифт для текста, который имеет нормальный вес (font-weight: 400) или выделен жирным шрифтом (font-weight: 700).Браузер видит, что у него есть сверхлегкий шрифт (потому что вы так сказали) и ему нужен нормальный шрифт, и он делает то, что называется «синтетическим полужирным шрифтом»: искусственно делает буквы жирнее, рисуя их несколько раз с небольшим смещением.

Не существует стандарта для синтетического полужирного шрифта, и поведение браузеров по умолчанию различается.

Если вы пытаетесь использовать этот шрифт для полужирного текста, и это уже жирный шрифт, вы должны сказать об этом вваше правило шрифта, используя дескриптор font-weight.

1 голос
/ 21 августа 2012

При использовании веб-гарнитур с «вариантами шрифтов», включающими разные веса и / или курсив, включенные в семейство шрифтов, всегда применяйте «font-style: normal» & font-weight: 400; (или font-weight: normal) для каждого объявления стиля. Не забудьте явно объявить каждое семейство шрифтов по-разному для каждого варианта:

Например: я использую Helvatica Neue с сайта fonts.com 

strong, b {
  font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
}

em, i {
  font-family: 'HelveticaNeueW01-56It',  Arial, sans-serif;
  font-style: normal;
}

Firefox «выручит» ваши шрифты, подставив подделку и выделив курсивом ваш прекрасный тип @ font-face, сделав их по-настоящему уродливыми и разрушив всю тяжелую работу, которую проделал дизайнер при создании шрифтов.

Это относится ко всем источникам шрифтов, включая typekit, google, fonts.com и локально размещенные шрифты.

0 голосов
/ 10 апреля 2012

Та же самая проблема на веб-сайте моего клиента свела меня с ума, но я наконец нашел проблему. Когда вы вызываете 'SerifaBold' в любом из ваших классов CSS, убедитесь, что вы также поставили font-weight: normal;

Это наконец решило проблему для меня.

0 голосов
/ 13 марта 2012

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

...