Шрифт Awesome в PNG

Строчный шрифт Awesome 6. Бесплатный идентификатор сплошного глифа, например. дом, звезда, шестерня

16 256 2048

Быстрый выбор

SVG загружаются из jsDelivr (бесплатный шрифт Awesome). Растеризация выполняется локально в вашем браузере.

Зачем экспортировать значки Font Awesome в PNG?

Font Awesome поставляется в виде веб-шрифтов или SVG, однако слайды, устаревшие поля CMS, шаблоны электронной почты, автономные брифы и некоторые элементы дизайна по-прежнему ожидают растрового PNG с предсказуемой прозрачностью. Когда им нужны четкие края в фиксированных пиксельных сетках, команды ищут «шрифт для экспорта в формате PNG», «прозрачный значок PNG» или «набор значков разных размеров». Перед экспортом определите целевую плотность (1x/2x/3x), сплошной или контурный стили, отступы и маркеры фирменного цвета — PNG не обеспечивает четкое масштабирование, поэтому создавайте изображения из самого большого размера на экране, который вам действительно нужен. Прежде чем объединять ресурсы для клиентов, ознакомьтесь с уровнями лицензий Font Awesome (Free и Pro) на предмет распространения, атрибуции и коммерческого повторного использования.

Рекомендуемый шрифт Awesome → Рабочий процесс PNG

  1. Выберите глиф и стиль, установите прозрачный фон, поля и пиксельную рамку в соответствии с минимальной целью касания вашей системы дизайна.
  2. Увеличьте масштаб, чтобы убедиться, что сглаживание не мутное; экспортируйте отдельные варианты в темном режиме или с высокой контрастностью, когда этого требует пользовательский интерфейс.
  3. Называйте файлы суффиксами плотности, публикуйте их через библиотеку компонентов или CDN и записывайте версию Font Awesome, а также примечания к лицензии в записи об изменениях.

Шрифт Awesome → Часто задаваемые вопросы по PNG

Один значок должен обслуживать iOS, Android и Интернет — как нам определить его размер?
Начните с минимального целевого показателя касания для каждой платформы, экспортируйте наборы @1x/@2x/@3x или mdpi/hdpi/xhdpi и избегайте масштабирования одного крошечного ресурса.
Прозрачные файлы PNG выглядят серыми на фотографиях — экспорт не работает?
Часто это контрастная или предварительно умноженная альфа; добавьте тонкий штрих, добавьте специальный вариант фирменного фона или настройте режимы наложения в инструменте макетирования.
Можем ли мы перепродавать экспортированные пакеты PNG?
Зависит от вашей подписки; Профессиональные активы обычно ограничивают перераспределение, поэтому перед продажей на торговой площадке прочитайте соглашение или спросите у юристов.
Контурные значки сворачиваются при уменьшении — что помогает?
Увеличьте разрешение экспорта образца, слегка утолщите обводки, переключитесь на сплошные глифы или переключитесь на упрощенное изображение для значков размером 16 пикселей.
Как обеспечить единообразие цвета значков и имен во всей организации?
Кодируйте цвета и префиксы имен файлов в токенах дизайна, автоматизируйте экспорт в CI и блокируйте одноразовые локальные настройки, которые никогда не попадают в библиотеку.