На разных проектах часто нужно использовать пиктограммы, значки, одноцветные картинки (icon). Для этого создают отдельный шрифт, который использует векторные картинки вместо символов. Это дает простоту изменения размера и цвета значков. Но, если углубиться в детали, то для этих целей лучше подходит графический формат SVG.
Рассмотрим причины не хранить значки в шрифтах.
-
Разделение представления
Если хранить значки в том же файле шрифта, который используется для текста на сайте, то мы получаем минус один запрос при загрузке, но значки-пиктограммы нужно записывать в особую область шрифта (Private Unicode Area), которая в некоторых случаях подменяется другими символами и не поддерживается внекоторых устройствах. Также нужно обратить внимание, что некоторые браузеры не поддерживают
@font-face
(например Opera Mini).
И если ваш шрифт не загрузился или недогрузился, то пользователи будут видеть непонятные символы виде квадратов с крестами на месте ожидаемой графики. Соответственно, для избежания подобных проблем, лучше использовать SVG или PNG. -
Разные технологии сглаживания в разных браузерах и ОС
Chrome, самый популярный браузер сейчас, в достаточно многих случаях плохо сглаживает шрифты, особенно с мелкими деталями или маленького размера. Поэтому значки из шрифтов смотрятся хуже и по разному в разных окружениях, что не происходит с SVG, которые рендерется максимально одинаково в разных браузерах.
-
Сгенерированный контент
Если мы используем шрифтовые значки, то, соответственно, нужно вставлять код символа в контент или использовать свойство
content
, а это – не всегда возможно. Например, когда псевдо-элементы:before
и:after
уже используются для других целей или некоторые элементы не поддерживают добавления сгенерированного контента вообще (input
).
Таких проблем не возникает с картинками. -
Меньше проблем с позиционированием
Если использовать шрифтовые значки, то часто возникают неточности и смещение картинки значка относительно контента. Причем эти проблемы возникают в разных браузерах в разных случаях, и сложно их исправлять кросбраузерно, не прибегая к хакам с line-height или абсолютным\относительным позиционированием.
С картинками SVG все намного проще, можно использоватьbackground-size: cover
и одинаково изменять размер и позицию в разных браузерах. -
Разноцветные значки (а не одноцветные)
С использованием SVG у нас нет ограничения добавить в иллюстрацию другой цвет или градиенты.
Конечно можно накладывать разные значки из шрифта с разными цветами, но тогда описанные выше проблемы удваиваются. -
Возможность анимации
Динамические элементы сейчас важная составляющая пользовательского интерфейса, они позволяют улучшить впечатления пользователя, добавляют уникальность проекту. Теперь это возможно делать в SVG, хоть и пока есть много ограничений в плане кросбраузерности.
-
Шрифт это не формат для изображений
Только у меня возникает ощущение, что шрифтовые значки – это способ сделать проще, то что делается другим стандартным способом? А это обычно называется хаком (hack).
Конечно, можно разводить полемику. Что символ в шрифте это векторное изображение, а значит его можно делать любым. Но это векторное изображение имеет четкое предназначение – отображать конкретный символ.
Но и тут можно поспорить, что такое символ и зачем он нужен. Думаю, очевидно, что разные инструменты, предназначенные для разных вещей, могут использоваться в одних и тех же процессах, но это не делает их назначение другим.
Преимущества font-face для значков
Использование шрифтов для значков дает огромное удобство в работе с их цветами – всегда очень просто изменить цвет шрифта. Очень просто изменять отображение значка в соответствии с состояниями элемента (например :hover, :focus). Также у font-face лучшая кросбраузерная поддержка, по сравнению с SVG.
На сколько критичны эти преимущества? Тут конечно все неоднозначно. Но в большинстве случаев этими плюсами шрифтов можно пренебречь.
Например, добавив в SVG-спрайт еще несколько копий одного и того же объекта, но разных цветов, мы получим абсолютно не значимое изменение в размере. Gzip-сжатие, которое используется в 99% случаев, добавит несколько десятков байт к файлу без копий (обычно это 1-3%). Напомню SVG основан на XML, а это – обычный текст, который прекрасно сжимается.
А использования различных техник составления спрайтов упрощают работу с background-position (пример).
Но уже скоро можно будет использовать SVG Fragment Identifiers, чтоб избавиться от одинаковых объектов в спрайте.
Что же касается кросбраузерности, то основная проблема – IE8. Достаточно просто сохранить вместе с SVG еще и PNG копию файла и добавить отдельный CSS для IE8 или продублировать декларацию свойства background файлом PNG перед SVG. В автоматизации этого процесса может помочь Grunticon.
Можно сделать вывод – что лишь в особых случаях использование шрифтов для значков оправданно.