Загрузка векторных значков через @font-face: за и против

С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.

<style>  
.staricon {  
  font-family: 'IconPack';  
}  
.staricon:before {  
  content: 'a';  
}  
.show {  
  display:block;  
}  
.hide {  
  display:none;  
}  
</style>  
  
<div class="staricon">  
  <span class="show">star</span>  
</div>

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

Преимущества

Потенциально гораздо меньше HTTP-запросов
Скачивание сотни маленьких картинок может занимать гораздо больше времени, чем одного большого файла. В некоторых случаях, это может привести к более быстрой загрузке страницы (как верно заметил хабраюзер Finom в комментариях, для этого используются спрайты).

Один значок, бесконечные размеры
Векторные значки означают масштабирование. Забудьте icon_8x8.png, icon_16x16.png, icon_24x24.png и т.д.

Более чёткая система менеджмента значков
Менеджмент значков, где у каждой есть куча вариантов разных размеров и цветов, может стать серьёзной головной болью. Со шрифтами все цвета/размеры находятся в одном файле.

Замена значков одной строкой CSS
Все разговоры о TypeKit и о том, как легко встраивать шрифты, в будущем могут точно так же перейти на значки.

Спецэффекты на CSS3
Вышеупомянутые анимированные эффекты, плавная смена цвета по наведению мыши и другие эффекты могут стать интересным приёмом веб-дизайна.

Недостатки

Шрифты могут быть большими
Сложный шрифт легко перевалить за 90 КБ. Трудно оправдать такой размер, если вам нужен один какой-то особенный значок.

Нет стандартов
Если предположить, что TypeKit должен разрабатывать и продавать наборы значков, как сейчас они предлагают встраиваемые шрифты, то тогда нужно сделать стандартный набор символов для иконок в наборе, а также присвоить каждому значку устойчивый порядковый номер. В противном случае, мы не сможем легко менять один набор значков на другой, как сейчас делаем со шрифтами.

Риск испортить дизайн
Эксперименты со значками из шрифтов показывают, как легко запоро��ь дизайн, если неправильно использовать эту технику.

Разноцветные значки не работают
Если вы хотите внедрить разноцветные значки (например, флаги стран), то вас ждёт разочарование: CSS3 позволяет использовать только простые градиенты, но больше ничего.

Поддержка не всеми браузерами
Если браузер пользователя принудительно запрещает загрузку шрифтов и использует только встроенные шрифты, то никаких значков он вообще не увидит.

via srd