Олли Уильямс пробует разобраться, действительно ли в 2024 году плохо использовать иконочные шрифты.
- Говорят, иконки в шрифтах невозможно перекрасить. Но вообще-то браузеры уже умеют в COLRv1, то есть в цветные шрифты, которые вполне себе можно перекрашивать.
- Говорят, что если нужно сделать чуть более жирную иконку, то шрифт развалится без значительных доработок. Ну, вообще-то мы уже давно умеем в вариативные шрифты, а там можно на различные параметры завязать жирность — вот и решение.
- Говорят, иконочные шрифты негативно влияют на производительность страницы. Но ведь woff2 очень даже компактный, а если сверху добавить
unicode-range вместе с каким-нибудь glyphhanger, то ничего лишнего на страницу и не попадёт.- Говорят, если шрифт не загрузится, пользователь увидит страшное. Ну, вообще-то если ваши иконки не встроены SVG-спрайтом или инлайном на страницу, то всё тоже может сломаться.
- Говорят, иконочные шрифты ломают доступность. Да, символы в том же Font Awesome явно не те, которые будет адекватно озвучивать скринридер. Но у нас уже есть в браузерах как ARIA-атрибуты, так и
content: 'text' / 'alt-text'; для псевдоэлементов.В статье есть ещё пара аргументов в пользу того, что на самом деле иконочные шрифты не так уж и вредны. Хотя в конце Олли советует всё-таки использовать SVG для таких задач, потому что там проблем в разы меньше, а накопленного опыта — больше.
Я же хочу добавить, что добавляя иконочный шрифт на сайт вы сами себя делаете заложниками этого шрифта. Не знаю, как вы, а я вот довольно плохо понимаю, как сделать качественный шрифт, который не содержит внутри кучу мусора, правильно обрабатывается всеми инструментами, умеет в вариативность, цветные глифы, ещё и с текстом выравнивается адекватно, если вставить его в строку. Почитайте хотя бы Романа Шамина в твиттере, как он подходил к разработке шрифта Злых Марсиан — я о таких нюансах даже не задумывался раньше. А с SVG, мне кажется, веб-разработчик всё-таки как-нибудь справится, если ему нужно будет что-то даже радикально поменять.
https://fullystacked.net/icon-fonts/