Иконки веб-шрифтов: альтернатива изображениям



Крейг Баклер

Оригинал: sitepoint.com/webfont-icons

Перевод: Влад Мержевич

Давайте будем честными, делать мелкие значки дюжинами в графическом пакете не весело. Даже если вы собрали подходящий набор, вам придётся управлять дюжиной мелких файлов или создавать спрайты изображений и нарезать их затем в CSS.

К счастью, HTML5 предоставляет нам еще один вариант: веб-шрифты. Набор шрифтов может содержать графические иконки и наборы символов. Wingdings — это один из наиболее известных, но свободные шрифты вроде Iconic могут быть более полезными и обеспечат пример кода на HTML и CSS.

Просмотр демонстрационной страницы

Как только вы нашли или создали подходящий шрифт, вам нужно конвертировать его в различные форматы, чтобы обеспечить хорошую кроссбраузерную совместимость. @Font-Face Generator на fontsquirrel.com делает тяжёлую работу за вас и предоставляет zip-файл, содержащий все шрифты и код CSS. Шрифт затем импортируется вверху вашего CSS-файла, например.

@font-face {
  font-family: "IconicStroke";
  src: url("iconic_stroke.eot");
  src: url("iconic_stroke.woff") format("woff"),
  url("iconic_stroke.ttf") format("truetype"),
  url("iconic_stroke.otf") format("opentype"),
  url("iconic_stroke.svg#iconic") format("svg");
}

Возможно добавить иконку символов в ваш HTML-файл, например, с помощью «r» для иконки RSS. Однако, это может запутать людей, использующих программы чтения с экрана, так что более безопасный вариант — применить псевдоэлементы.

Ваш HTML:

<a href="rss.xml" class="rss">RSS Feed</a>

Ваш CSS:

.rss:before {
  font-family: "IconicStroke";
  content: "r";
}

Преимущества иконок веб-шрифтов

Веб-шрифты могут быть идеальной альтернативой графике:

  • шрифты можно масштабировать до любого размера, использовать любые цвета и применять CSS-эффекты;
  • веб-шрифты предлагают хорошую кроссбраузерность и даже работают в IE6;
  • один файл со шрифтом может быть более эффективным, чем несколько изображений.

Недостатки иконок веб-шрифтов

Веб-шрифты не всегда подходят:

  • символы могут быть только однотонными (хотя могут помочь эффекты CSS3);
  • создание шрифтов не проще чем PNG или SVG;
  • размер файла с изображением может быть меньше, если требуется всего несколько иконок.

В целом, недостатков немного, чтобы иконки веб-шрифтов не понравились, вдобавок, они могут сократить время разработки. Вы уже использовали этот приём в ваших проектах?

Просмотр демонстрационной страницы с иконками веб-шрифтов

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.