Gtalk.kz

Оригинальное название: Seren Davies: Death to icon fonts – EpicFEL 2015
Выступление на конференции EpicFEL, 26 сентября 2015 года.

Видео:

Слайды: https://speakerdeck.com/ninjanails/death-to-icon-fonts-1

В данной рубрике я рассказываю тезисно о выступлениях зарубежных спикеров. В комментариях всегда можно меня поправить ;).

TL;DR: Используйте SVG

В чем собственно проблема иконочных шрифтов?!

• Люди с дислексией, используются специальный шрифт, который перебивает ваши шрифты, поэтому иконки не отображаются.
  
• Скринридеры: читают не правильно ваши иконки.
  
• Пользователи опера мини: браузер не поддерживает иконочные шрифты (250М+ юзеров в мире)
• Используемый юникод для шрифтов отличается в браузерах (и получается вот так)
• iOS 9 можно включить запрет на блокировку внешних шрифтов

Но ведь есть плюсы иконочных шрифтов ради которых их используют:

• Масштабируемость
• Стилизация: смена цвета иконки
• Снижаем количество http запросов

Icon font perf in Chrome is ~5x SVG atm (c) Addy Osmani

Но стоит ли это того?!
Ищем выход. Находим. Это SVG:

• Хорошая доступность, если инлайнить, то можно добавить название и описание к иконке.
• Масштабируемость. Вектор же
• Мультистилизация: несколько цветов для 1 иконки
  
• Анимация
• Можно использовать как простые картинки в теге img, так и в css (background), также svg tag и icon system
• Хорошая поддержка браузерами: от IE9+

Итог одной картинкой:

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

Всем спасибо

UPD: Ещё одна полезная статья 10 причин перехода от иконочного шрифта на SVG