@ font-face: жирный шрифт в FF смелее, чем в Chrome - PullRequest
Новая
       52

@ font-face: жирный шрифт в FF смелее, чем в Chrome

19 голосов
/ 20 января 2012

Я использовал этот код: 

@font-face {
    font-family: 'DroidSansRegular';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

и когда я использую font-weight: bold;, то полужирный текст в Chrome - это нормально, но в Firefox он слишком смелый.

Как это решить?

PS: я должен использовать шрифты из локальных файлов.

Ответы [ 9 ]

34 голосов
/ 30 июля 2013

FireFox опубликовал решение об этом сегодня на своем форуме об ошибках.Он был только что завершен сегодня, поэтому некоторое время не будет использоваться, но мы все должны поместить 

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

в наш тег body, чтобы сбросить его для всех браузеров.В КОНЦЕ КОНЦОВ!!Человек, который сделал мой день!Это должно выйти в следующем выпуске FF.

тема здесь https://bugzilla.mozilla.org/show_bug.cgi?id=857142

26 голосов
/ 20 января 2012

Проблема здесь в том, что FF берет шрифт и применяет к нему жирный шрифт (так что в основном это удваивает эффект).Chrome, похоже, не меняет вес шрифта, а просто использует правильный шрифт.Я думаю, что это происходит потому, что вы объявляете два разных семейства шрифтов.Правильный CSS для этого случая: 

@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Обратите внимание, что я изменил семейство шрифтов на «DroidSans», а не «DroidSansRegular» и «DroidSansBold».

2 голосов
/ 03 апреля 2012

Проблема заключается в том, что Firefox пытается добавить жирный аффект к тексту даже для пользовательских шрифтов, которые уже выделены жирным шрифтом.У меня точно такая же ситуация, и я решил ее, установив font-weight: normal; в объявлении @ font-face.

Пример: 

@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Вам также понадобится использоватьfont-weight:normal; для любого элемента (например, h1, h2 и т. Д.), Для которого в противном случае было бы установлено font-weight:bold;, в противном случае Firefox все равно добавит жирный шрифт в пользовательский шрифт.

1 голос
/ 28 января 2013

Вы указали два лица в двух разных семьях. Вы определили обычное лицо в семье под названием «DroidSansRegular», и вы определили жирное лицо в семье под названием «DroidSansBold». Дизайн CSS предполагает, что вы определите их как два веса одного семейства. Если вы заставите обоих сказать font-family: "DroidSans";, тогда вы можете использовать семейство шрифтов под названием «DroidSans», а когда вы попросите смелый, вы получите смелое лицо от этого семейства.

(Упс. Выбранный ответ уже дал правильное решение, но не совсем объяснил, в чем дело.)

0 голосов
/ 03 июля 2018 
@-moz-document url-prefix() {
  body h3{
    font-weight: normal;
    font-style: normal;
  }
}

это сработало для меня!

0 голосов
/ 28 октября 2013

Я использовал решение Алекса: 

@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefont-webfont.eot');
    src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefont-webfont.woff') format('woff'),
         url('fonts/somefont-webfont.ttf') format('truetype'),
         url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefontbold-webfont.eot');
    src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefontbold-webfont.woff') format('woff'),
         url('fonts/somefontbold-webfont.ttf') format('truetype'),
         url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Что еще не работает в Firefox v24 ... Сегодня, 2013. 28 октября. Проблема bold @ font-face все еще существует.

После небольшого поиска я нашел это решение здесь: https://support.mozilla.org/hu/questions/801491

Что работало, по крайней мере до тех пор, пока Mozilla не исправила эту проблему в обновлении ( 2011.03.27 ... ), отключало Аппаратное ускорение . Перейдите к Инструменты-> Параметры | Расширенный | Вкладка "Общие" | Снимите флажок «Использовать аппаратное ускорение, если доступно» . Я уверен, что это каким-то образом влияет на производительность, но пока все работает нормально.

Что печально, что вы действительно не можете ничего сделать 1020 * с жирными шрифтами в Firefox ... У вас действительно нет возможности отключить это на компьютерах пользователей. Аппаратное ускорение действительно важно. Я думаю, тебе просто нужно с этим жить. Они не исправили это за последние 3-4 года. Вероятно, они не исправят это в будущем.

Однако я заметил, что, возможно, эта проблема не влияет на внешние шрифты javascript (например, Typekit, EdgeFonts).

Надеюсь, что Chrome найдет свой путь на все большем количестве ПК пользователя ...

UPDATE:

Можно только отключить части аппаратного ускорения. Учебник здесь: http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/

Также упоминалось другое решение: отключите анизотропную фильтрацию для Firefox на странице настроек вашей графической карты (но это не работает для меня).

0 голосов
/ 11 января 2013

Моя проблема заключалась в том, что текст, который был "более жирным", был внутри тега h1.Я просто добавил следующее в мой CSS, и это устранило проблему!:) 

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
0 голосов
/ 20 января 2012

Как правило, шрифты на основе JavaScript отображаются лучше, хотя в разных браузерах все будет выглядеть по-разному из-за механизмов визуализации. Вы даже заметите разницу между Windows и Mac в одном браузере.

Typekit - мой любимый выбор. Шрифты Google тоже неплохо работают. Я думаю, что DroidSans - это вариант в Google или Typekit.

0 голосов
/ 20 января 2012

В двух словах, действительно нет способа решить эту проблему из-за небольших различий в механизмах рендеринга и внутренних настройках, используемых каждым браузером.(как намекал @LainBallard).

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

...