Давайте будем честными, создавать десятки крошечных иконок в графическом пакете не весело. Даже когда вы собрали приличный набор, вы в конечном итоге управляете десятками крошечных файлов или создаете спрайты изображений и разрезаете их в 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 Iconic. Однако это может сбить с толку людей, использующих программы чтения с экрана, поэтому псевдоэлементы CSS являются более безопасным вариантом, например
Ваш HTML:
<a href="rss.xml" class="rss">RSS Feed</a>
Ваш CSS:
.rss:before { font-family: "IconicStroke"; content: "r"; }тем.rss:before { font-family: "IconicStroke"; content: "r"; }
Преимущества иконок Webfont
Веб-шрифты могут стать идеальной альтернативой графике:
- шрифты можно масштабировать до любого размера, использовать любой цвет и применять CSS-эффекты
- веб-шрифты предлагают хорошую совместимость с различными браузерами и даже работают в IE6
- один файл шрифта может быть более эффективным, чем несколько изображений
Недостатки иконок веб-шрифтов
Веб-шрифты могут не всегда подходить:
- символы шрифта одноцветные (хотя эффекты CSS3 могут помочь)
- генерировать шрифты не так просто, как PNG или SVG
- Размер файла изображения будет меньше, если вам потребуется всего несколько значков.
В целом, значки веб-шрифтов могут не нравиться, и они могут сократить время разработки. Вы использовали их в своих проектах?