Загрузка векторных значков через @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