Использование мобильных устройств предъявляет особые требования к программированию веб-сайтов и дизайну пользовательских интерфейсов. Важно, чтобы приложения для мобильных устройств были быстрыми и интуитивно понятными, а контент загружался быстро. Поэтому современная тенденция тяготеет к минимализму в дизайне — так называемому Flat Design. В духе принципа «Меньше — значит больше» используются стилизованные изображения команд (иконки) вместо реальных изображений. Например, перьевая ручка может обозначать текстовый редактор, а динамик — возможность воспроизведения звука.
Главное преимущество таких двумерных иконок заключается в их компактности, поскольку они внедряются в исходный код страницы или пользовательский интерфейс в виде шрифтов. Flat Design можно рассматривать как форму скевоморфизма — стиля, который воспроизводит объекты в виде символов максимально реалистично, чтобы облегчить взаимодействие пользователя с цифровыми командами. Знаковым примером Flat Design является интерфейс Microsoft Windows 8, оптимизированный для сенсорных экранов.
Что такое шрифт с иконками?
Лупа в поисковом поле, корзина в интернет-магазине или конверт рядом с адресом электронной почты — всё это примеры иконок, которые можно встретить почти на любом сайте. Они помогают пользователям ориентироваться, поясняют функции элементов и делают их понятными без слов.
Вместо использования растровых изображений или CSS-спрайтов, разработчики всё чаще применяют шрифты с иконками — шрифты, содержащие векторные иконки вместо букв. В отличие от растровых изображений, зависящих от количества пикселей, векторные иконки легко масштабируются без потери качества и занимают меньше места. Такие шрифты можно удобно настраивать с помощью CSS.
Иконки из векторных шрифтов чётко отображаются даже на экранах с высоким разрешением. Однако они, как правило, монохромны (CSS позволяет добавить оттенки цветов). Важно отметить, что даже для использования одной иконки необходимо загружать весь шрифт. В интернете доступно множество бесплатных сервисов для установки таких шрифтов.
Сервисы, предлагающие шрифты с иконками
Для работы с шрифтами с иконками разработчикам необязательно использовать платные решения. В интернете доступны многочисленные open-source сервисы с широким выбором бесплатных иконок. Вот некоторые из них:
- Font AwesomeОдна из крупнейших open-source библиотек иконок, изначально созданная для Bootstrap, но совместимая с другими фреймворками.
Более 600 иконок векторного формата, совместимых с экранными читалками и масштабируемых без потери качества.
Лицензия SIL Open Font License (SIL OFL) позволяет бесплатное использование даже в коммерческих целях. - EntypoВ отличие от Font Awesome, Entypo предоставляет набор векторных иконок в формате SVG, которые можно использовать как основу для создания собственных шрифтов с помощью генераторов.
Лицензия Creative Commons CC BY-SA 4.0 позволяет коммерческое использование. - TypiconsБиблиотека из более чем 300 векторных иконок, оптимизированных для экранных читалок.
Поддерживает установку через open-source инструмент Bower.
Лицензия SIL Open Font License (SIL OFL). - Open IconicПредоставляет более 200 иконок в формате SVG и различных векторных форматах.
Главный акцент — минимальный размер: например, файл WOFF весит всего 12,4 КБ, что гораздо меньше, чем у Font Awesome.
Лицензия MIT для иконок и SIL OFL для шрифтов.
Настройка наборов шрифтов
Часто разработчикам не нужны все иконки из библиотеки. Обычно на сайте используется комбинация иконок из разных источников. Такие кастомные наборы можно собрать с помощью генераторов, например Fontello, Fontastic.me или IcoMoon App.
Кастомные наборы шрифтов позволяют включить только те иконки, которые необходимы на сайте. Это уменьшает размер файлов и сокращает время загрузки страницы.
Внедрение шрифтов с иконками
Иконки добавляются через атрибут class в HTML-коде. Соответствующий шрифт подключается в <head> HTML-документа. Многие сервисы предоставляют стандартный CSS-файл для упрощения интеграции. Кроме того, поддерживаемые шрифты можно встроить через фреймворк Bootstrap.
Настройка иконок
С помощью CSS разработчики могут адаптировать размеры, цвета и функции иконок к особенностям сайта. Например, можно добавлять эффекты, такие как тени или паттерны.
Использование векторных иконок через шрифты обеспечивает гибкость и улучшает производительность сайта, делая его современным, лёгким и интуитивным.