Как уменьшить вес шрифта в 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: оттенки серого,