Как уменьшить вес шрифта в Firefox на Mac с помощью CSS?

Вот моя проблема: я использую font-face для меню моего сайта, но Firefox на Mac отображает его слишком жирно На ПК все работает хорошо, шрифт имеет идеальный размер и выглядит так, как и должен

К сожалению, на Mac я должен был взломать CSS для Safari (который работает), но я не нашел ничего похожего в Firefox.

Я попробовал "взлом текста-тени", я попытался использовать свойство font-weight (которое почти ничего не делает).

А теперь немного кода!

@font-face {
    font-family: 'KnockoutHTF48FeatherweightRg';
    src: url('font/knockout-htf48-featherweight-webfont.eot');
    src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
         url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
         url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');
    font-weight: normal;
    font-style: normal;

}

Для Safari:

body{
    ...
    -webkit-font-smoothing: antialiased;
}

Слева, если FF на Mac, а справа - FF на ПК (хорошая версия)

Спасибо!

Ответ 1

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

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

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

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

Ответ 2

вы можете использовать

font-weight:normal !important;

для исправления ошибки визуализации в firefox Mac.

Ответ 3

Это влияет только на браузер Firefox.

@-moz-document url-prefix() {
  .classname {
    font-weight:normal;

    /* or any other option */
  }
}

Наслаждайтесь!

Ответ 4

Существует трюк http://dave-bond.com/css/font-too-bold-on-a-mac/ в основном это применять непрозрачность: 0,99; к этим текстам...

Ответ 5

Каждый шрифт поддерживает разные веса. Некоторые могут быть на самом деле, другие не могут.

Mac и ПК будут отображать один и тот же шрифт по-разному. Это основная операционная система, и в принципе, вы ничего не можете с этим поделать.: (

Самые последовательные результаты могут быть достигнуты с помощью Google Webfonts или TypeKit.

Один из самых тонких шрифтов на Mac - Helvetica Neue.

Также стоит отметить, что font-weight поддерживает значения 100,200,... 800,900.

Ответ 6

Я обнаружил, что создание "более легкой" версии значков - лучший способ компенсировать это. Они проходимы в Firefox, и все-таки немного легче во всех других браузерах. В Illustrator я создаю значок 16 пикселей. Я изменяю его размер до 1024px и применяю путь смещения -6px (это числа, которые лучше всего подходят для меня). Затем я экспортирую это как svg и импортирую его в IcoMoon для создания значка. Я не использую -webkit-font-smoothing: antialiased (или ожидающий -moz-osx-шрифт-сглаживание: оттенки серого), если только это не светлый значок на темном фоне. Это самый лучший способ, которым я нашел, чтобы иконки-шрифты отображались (в основном) равномерно между браузерами и платформами.

Ответ 7

Обнаружено это в CSS-трюках, и это freaking работает.

добавьте это в таблицу стилей: -moz-osx-font-smoothing: оттенки серого,