Подтвердить что ты не робот

@font-face: полужирный в FF смелее, чем в Chrome

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

@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: Мне нужно использовать шрифты из локальных файлов.

4b9b3361

ОТВЕТЫ

Ответ 1

Проблема здесь в том, что 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

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

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

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

поток здесь https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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

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

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

UPDATE:

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

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

Ответ 7

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

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

Ответ 8

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

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