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

Question

Вот моя проблема: я использую 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 на ПК (хорошая версия) Снимок экрана http://i44.tinypic.com/ehm72a.jpg

Спасибо!

Answer 1

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

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

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

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

Answer 2

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

font-weight:normal !important;

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

Answer 3

Это касается ТОЛЬКО браузера firefox.

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

    /* or any other option */
  }
}

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

Answer 4

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

Answer 5

Нашли это на CSS Tricks и это чертовски работает.

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

Answer 6

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

Answer 7

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

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

Наиболее последовательные результаты можно получить, используя что-то вроде Google Webfonts или TypeKit .

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

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