Font icons — кто как борется с багами?

Question

[Евгений Федоров]

Последнее время частенько начал наблюдать с иконками вот такие маленькие баги. То дорисует пиксель, то обрежет... Лично я с этим борюсь ресайзом. Причем иногда нормальный встречается аж через 5 пикселей. Но вот если нужен именно этот размер фонта, проблема... Кто как это делает?


Css фонта:

@font-face {
  font-family: 'FontAwesome';
  src: url('../../fonts/fontawesome-webfont.eot?v=3.2.1');
  src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  *margin-right: .3em;
}
[class^="icon-"]:before,[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}

Comments

[Евгений Федоров]

Ответ @bzz помог убрать некоторые проблемы. Стало менее заметно.
Хотя все равно еще остались проблемы с отрисовкой.

[Евгений Федоров]

Проблема была в ттф формате. С другом проверили что формат ттф, который понимает Хром хорошо отображается на маке. Но плохо на винде. Поэтому делаем проверку на веб кит и винду и ставим вместо tff -> svg. Так как в css делать проверку на ОС нельзя пишем просто на веб кит.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'FontAwesome';
		src: url('../../fonts/fontawesome-webfont.svg') format('svg');
	}
}

Answer 1

[bzz]

www.adtrak.co.uk/blog/font-face-chrome-rendering/#fix

Comments

[Евгений Федоров]

Спасибо. Одно из решений =)

[bzz]

Тоже долго боролся с этим. Больше всего проблем именно в Хроме, тот же Explorer 11 и без этих финтов нормально рендерит.

[Евгений Федоров]

@bzz Единственное чего я не понял еще это как работают вот такие штуки. fontawesome-webfont.svg#fontawesomeregular?v=3.2.1. Что это за #fontawesomeregular версия это вроде для кеша. У меня просто такой код в хроме не сработал. Но при этом нормально сработало без него.