Почему иконочный шрифт отображается с зазубринами?

Question

[Андрей]

решил использовать на сайте векторные иконки, собрал шрифт на сервисе flaticon.com
пробовал вставлять отдельными svg файлами, при размере иконок 18 х 18 появляются корявости/шершавости.
на айфоне отображаются отлично, на десктопе - отвратительно.

кто сталкивался с такой проблемой? как её можно решить?


браузеры хром, лис, win10

Comments

[Lynn «Кофеман»]

Не использовать иконочный шрифт.
SVG по идее должен отображаться нормально

[Moskus]

Не "с зазубринами", а "без сглаживания".
Как вставляли, где код?

Вечное "снятие порчи по фотографии"...

[Андрей]

Moskus,

@font-face {
  font-family: "Flaticon";
  src: url("../fonts/Flaticon.eot");
  src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
  url("../fonts/Flaticon.woff2") format("woff2"),
  url("../fonts/Flaticon.woff") format("woff"),
  url("../fonts/Flaticon.ttf") format("truetype"),
  url("../fonts/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "Flaticon";
    src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
  }
}

.fi:before {
  display: inline-block;
  font-family: "Flaticon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.flaticon-levels-adjusment:before { content: "\f100"; }
.flaticon-lock:before { content: "\f101"; }
.flaticon-media-play-symbol:before { content: "\f102"; }
.flaticon-add-song:before { content: "\f103"; }
.flaticon-search:before { content: "\f104"; }
.....

[Moskus]

Андрей, а теперь берите и убирайте форматы по одному, и смотрите, что получится. Так выглядит процесс изоляции проблемы.

Answer 1

[rogiivs]

почитай про сглаживание шрифта MDN font-smooth