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

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

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

в нашем body тег, чтобы сбросить это на всех браузерах. Наконец-то!! чувак,это сделало мой день! Это должно выйти в следующем выпуске ФФ.

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

проблема в том, что 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; set в противном случае Firefox все равно добавит полужирный шрифт в пользовательский шрифт.

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

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

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

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}

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

@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 октября. проблема с жирным шрифтом @font-face все еще существует.

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

что работало, по крайней мере, пока Mozilla не исправит эту проблему в обновлении (2011.03.27...), является оборудование Ускорение. Перейти к Tools->Options | Advanced | General tab / снимите флажок "Использовать аппаратное ускорение при наличии". Я уверен, что это каким-то образом влияет на производительность, но пока все работает нормально.

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

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

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

обновление:

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

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

@-moz-document url-prefix() {
  body h3{
    font-weight: normal;
    font-style: normal;
  }
}

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

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

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

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

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