Я использую Font Awesome для создания значков на моем сайте, и пока они выглядят фантастически на iPod Touch с дисплеем Retina, на моем iMac они выглядят немного размытыми и менее определенными.
Здесь изображение, чтобы продемонстрировать:
Как вы можете видеть, шрифт выглядит очень красиво и нарисован на дисплее Retina Display iPod Touch, но на iMac он выглядит как дерьмовый.
Что вызывает это? Это связано с сглаживанием? Есть ли что-то, что я могу сделать по этому поводу?
Такие проблемы, вероятно, связаны с сглаживанием или намеком. Шрифты должны быть выровнены по какой-то сетке, если они надеются хорошо выглядеть на меньших размерах. Ребята из GitHub написали большое сообщение в блоге о том, как они управляли чистотой своего пользовательского шрифта.
Я бы попытался выровнять его по сетке и следовать по стопам GitHub. Они отлично поработали над своими значками.
Также: находятся ли разные цифровые размеры между iPod Touch и iMac или это побочный эффект от разных настроек DPI? Это может также быть проблемой для рендеринга шрифтов.
Если возможно, поиграйте со своими настройками DPI. Я не использую Mac, поэтому я не знаю, как изменить эти настройки на одном. Тем не менее, он все равно не будет исправлять проблему с сеткой. Вы можете отредактировать соответствующий шрифт (ы)?
Добавляя к ответу @sporkbox, если вас особенно беспокоят браузеры Webkit, есть следующие варианты CSS, которые вы можете использовать:
font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
Я обнаружил, что некоторые браузеры пытаются эмулировать полужирный шрифт, когда нет лишнего веса, делая линии более толстыми, в результате чего что-то похожее на ситуацию, которую вы описываете. Вы уверены, что это появляется где-то, где у вас есть font-weight: normal;?
есть странный трюк, который работает когда-нибудь, попробуйте:
-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);
если у вас есть блок с центром, попробуйте проверить, является ли левое смещение целочисленным. Вы можете использовать Javascript для проверки и исправления. Я могу помочь вам, если вы хотите.
Лучшее кросс-браузерное решение:
.your_font_class{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
-webkit-perspective: 1000;
Исправлено это для меня
Сглаживание сглаживания css:
-webkit-font-smoothing: antialiased;