Оригинальное название: Серен Дэвис: смерть иконочным шрифтам — EpicFEL 2015
Выступление на конференции EpicFEL, 26 сентября 2015 года.
видео:
В данной рубрике я рассказываю тезисно о выступлениях зарубежных спикеров. В комментариях всегда можно меня поправить ;).
TL;DR: Используйте SVG
В чем собственно проблема иконочных шрифтов?!
- Люди с дислексией, используются специальный шрифт, который перебивает ваши шрифты, поэтому иконки не отображаются.
- Скринридеры: читают не правильно ваши иконки.
- Пользователи опера мини: браузер не поддерживает иконочные шрифты (250М+ юзеров в мире)
- Используемый юникод для шрифтов отличается в браузерах (и получается вот так)
- iOS 9 можно включить запрет на блокировку внешних шрифтов
Но ведь есть плюсы иконочных шрифтов ради которых их используют:
- Масштабируемость
- Стилизация: смена цвета иконки
- Снижаем количество http запросов
Производительность иконочного шрифта в Chrome ~5x SVG atm (c) Эдди Османи
Но стоит ли это того?!
Ищем выход. Находим. Это SVG:
- Хорошая доступность, если инлайнить, то можно добавить название и описание к иконке.
- Масштабируемость. Вектор же
- Мультистилизация: несколько цветов для 1 иконки
- Анимация
- Можно использовать как простые картинки в теге img, так и в css (background), также svg tag и icon system
- Хорошая поддержка браузерами: от IE9+
Итог одной картинкой:
Иконочный шрифт vs SVG
Всем спасибо
УПД: Ещё одна полезная статья 10 причин перехода от иконочного шрифта на SVG
