Сама идея не нова. Данный способ используется во многих проектах и обсуждался он на многих форумах.
Также, появились сервисы, как платные так и бесплатные, для генерации шрифтов с иконками. Некоторые из них:
- IcoMoon – http://icomoon.io
- Fico – http://fico.lensco.be
- Fontello – http://fontello.com
- Pictos – http://pictos.cc
Или вот – громадный список источников готовых “иконочных шрифтов” самых разных видов.
О чем речь?
Традиционно, для реализации “иконографии в вебе” и стандартом служили различные bitmap форматы, такие как PNG. Быстрые, легкие и гарантируют точность пикселей, но, не смотря на преимущества, имеющие два существенных недостатка:
- множественные HTTP запросы к файлам иконок негативно влияют на скорость загрузки страниц (частично проблема решается посредством создания CSS-спрайтов);
- отсутствие масштабируемости, которое наблюдается при увеличении масштаба страницы (zoom) или при просмотре страницы на устройстве с бОльшей плотностью пикселей и разрешением.
Да, спрайты решают первую проблему. Иконки, объединенные в одно большое изображение, управляемое background-position грузятся единожды. Но масштабируемость – актуальная проблема.
Векторный формат графики SVG, казалось бы, идеально подходит для решения этой проблемы, но это порождает новую проблему, связанную с кроссбраузерностью.
Альтернатива
С развитием и признанием веб шрифтов появилась альтернатива. По своей природе шрифты не только масштабируемы, но и не зависят от разрешения. Следовательно нет необходимости для разного разрешения создавать разные экземпляры.
На этом преимущества шрифтов не заканчиваются:
- Кроссбраузерность. В отличие от большинства красивых “вкусностей” в веб технологиях, шрифты поддерживались еще в Internet Explorer 4.
- Дизайн налету. Шрифты содержат базовую графику, которая потом может быть стилизована с помощью CSS, используя псевдо-классы, классы и любые другие условия доступные в CSS.
- Минимальный размер файла. Размер файла сгенерированного шрифта может занимать около 10 килобайт, так как содержит далеко не все символы, а только те, которые будут использоваться для иконок.
Безусловно, при наличии преимуществ не обходится без недостатков:
- Иконки могут иметь только монохромную раскраску. Конечно можно прибегнуть к CSS 3 чтобы использовать градиент, но в итоге – все равно, отдельные части иконок не могут быть другого цвета.
- Применимо только при использовании сопровождающего текста, описывающего, например, назначение иконки. Можно обернуть текст в тег и потом скрыть текст с помощью, например
text-indent:-999em; - Создание “иконочного” шрифта может быть сложной ручной работой.
- Если вы не помешаны на создании шрифтов, то вы всегда ограничены и вынуждены довольствоваться тем, что есть. Но шрифты, предлагаемые сервисами, перечисленными выше, покрывают большинство нужд разработчиков. К тому же, иконки более эффективны, когда они выполнены в одном стиле и похожи друг на друга.
В следующей части статьи рассмотрим пример практического применения “иконочного шрифта”.