Использование шрифта значка (шрифт Awesome) выглядит немного размытым и слишком смелым

Я использую Font Awesome для создания значков на моем сайте, и пока они выглядят фантастически на iPod Touch с дисплеем Retina, на моем iMac они выглядят немного размытыми и менее определенными.

Здесь изображение, чтобы продемонстрировать:

enter image description here

Как вы можете видеть, шрифт выглядит очень красиво и нарисован на дисплее Retina Display iPod Touch, но на iMac он выглядит как дерьмовый.

Что вызывает это? Это связано с сглаживанием? Есть ли что-то, что я могу сделать по этому поводу?

Ответы

Ответ 1

Такие проблемы, вероятно, связаны с сглаживанием или намеком. Шрифты должны быть выровнены по какой-то сетке, если они надеются хорошо выглядеть на меньших размерах. Ребята из GitHub написали большое сообщение в блоге о том, как они управляли чистотой своего пользовательского шрифта.

Я бы попытался выровнять его по сетке и следовать по стопам GitHub. Они отлично поработали над своими значками.

Также: находятся ли разные цифровые размеры между iPod Touch и iMac или это побочный эффект от разных настроек DPI? Это может также быть проблемой для рендеринга шрифтов.

Если возможно, поиграйте со своими настройками DPI. Я не использую Mac, поэтому я не знаю, как изменить эти настройки на одном. Тем не менее, он все равно не будет исправлять проблему с сеткой. Вы можете отредактировать соответствующий шрифт (ы)?

Ответ 2

Добавляя к ответу @sporkbox, если вас особенно беспокоят браузеры Webkit, есть следующие варианты CSS, которые вы можете использовать:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

Ответ 3

Я обнаружил, что некоторые браузеры пытаются эмулировать полужирный шрифт, когда нет лишнего веса, делая линии более толстыми, в результате чего что-то похожее на ситуацию, которую вы описываете. Вы уверены, что это появляется где-то, где у вас есть font-weight: normal;?

Ответ 4

есть странный трюк, который работает когда-нибудь, попробуйте:

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

если у вас есть блок с центром, попробуйте проверить, является ли левое смещение целочисленным. Вы можете использовать Javascript для проверки и исправления. Я могу помочь вам, если вы хотите.

Ответ 5

Лучшее кросс-браузерное решение:

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Ответ 6

-webkit-perspective: 1000;

Исправлено это для меня

Ответ 7

Сглаживание сглаживания css:

-webkit-font-smoothing: antialiased;