Иконочный шрифт

Для начала давайте узнаем, что такое шрифт.

📌 Что такое шрифт

Шрифт - это набор глифов - векторных форм каждой буквы или символа.

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

📌 Что такое иконочный шрифт

Исходя из дефиниции понятия "шрифт", мы можем легко сформулировать определение иконочного шрифта.

Иконочный шрифт - это шрифты, каждый символ которого представлен иконкой.

📌 Исользование иконочных шрифтов

◼️ Иконочные шрифты и растровые изображения

Иконочные шрифты приобрели популярность в те времена, когда во фронтенде царил растр, и не просто так.

• Вектор. Иконки из шрифтов имеют векторный формат. Это значит, что при масштабировании не будет происходить потеря качества, чего нельзя сказать про растровые изображения.
• Гибкость и масштабируемость. Иконочные шрифты, так же как и обычные легко стилизовать посредством css-правил: изменять размер, цвет, трансформировать, анимировать и др.
• Маленький вес. Файл шрифта сам по себе весит немного, чего не скажешь про груду растровых картинок.

Помимо этого, иконочные шрифты еще и кросс-браузерные, что в принципе логично.

◼️ Иконочные шрифты и векторные изображения

С появлением svg, потребность в иконочных шрифтах с каждым днем становится всё меньше.

Тому есть ряд причин:

• Возможности цвета. В иконочных шрифтах действует правило: одна иконка - один цвет. В svg же можно сочетать сколько угодно цветов.
• Монолитность. Символы иконочного шрифта монолитны - то есть нельзя взаимодействовать с какой-то определенной частью иконки. Svgдает нам такую возможность.
• Подгрузка. Если иконочный шрифт не подгрузится — увидим крякозябры, пока не загрузился стилевой файл и файл шрифта — видим пустоту. Svg мы грузим как хотим. Можем даже вставить ее в разметку - тогда увидим ее даже с незагруженными стилями.
• Семантика. Как ни крути, иконка - это изображение, но никак не шрифт. Иконочный шрифт - своего рода костыль, который нам в свое время очень помог, и мы ему за это благодарны. Но пришло время svg.

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

Однако если вы начинаете новый проект, то имеет смысл отдать свое предпочтение svg.

✏️ В заключение

Надеюсь, вам была полезна эта статья. Подписывайтесь на Code Monkey - здесь интересно!