Смерть иконочным шрифтам

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

slide_0
Видео:

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

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

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

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

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

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

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

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

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

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

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

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

slide_66
Всем спасибо :)

Seren Davies: Death to icon fonts – EpicFEL 2015

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



1 комментарий к записи

  • #

    Интересно. И полезно, что немаловажно :)