Иконки веб-шрифтов: альтернатива изображениям
Оригинал: 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;
- размер файла с изображением может быть меньше, если требуется всего несколько иконок.
В целом, недостатков немного, чтобы иконки веб-шрифтов не понравились, вдобавок, они могут сократить время разработки. Вы уже использовали этот приём в ваших проектах?