Как победить неточность отображения иконок fontaswesome?

Question

[zxmd]

Использую в одном проекте fontawesome и с ней приключилась беда.
Вся суть в картинках:

Первое изображение получено при:
body { font-family: 'Open Sans', sans-serif; }
второе при
body { font-family: sans-serif; }
При том что естественно к стилям самого fa никто не прикасался. Какая лажа с субпиксельной точностью поэтому вертикальные и горизональные линии немного "смазываются" (особенно заметно на камере), что придает иконкам несколько отвратительный вид.

Тестировалось на Mac OS X (yosemite), Google Chrome 40.0.2214.111 (64-bit)

Может кто то сталкивался с этим? Можно ли как то победить смазывание?

Answer 1

[Юнус Газиев]

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

Comments

[zxmd]

Дело в том, что я никак не влиияю на размер шрифта для класса .fa Проверил на всякий случай Computed стили. Стоит 14px.

[Юнус Газиев]

Тогда тебе лучше сделать демку на JSFiddle или ещё где то, и выложить ссылку на эту демку, так больше вероятности что кто-то заметит ошибку

[zxmd]

Да вроде с помощью шаманства и бубна поборол проблему. Оказалось верстальщик (злой человек) зачем-то в body переопределил
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
из за этого и пошли пляски.