От автора: всего за год до того, как в 1991 году была запущена первая веб-страница, Microsoft начала поставлять, пожалуй, самый известный шрифт иконок, Wingdings. Однако прошло почти 22 года, прежде чем шрифты иконок стали тенденцией дизайна в Интернете.
Введение CSS-правила @font-face позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, такие как Wingdings, можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, шрифты иконок фактически были способом добавления векторных иконок ваш веб-сайт.
Но шрифты иконок в Интернете с самого начала были в корне несовершенными. И теперь, когда в нашем распоряжении полная поддержка SVG, пора положить конец их использованию раз и навсегда.
Некорректные шрифты иконок
Вспышка нестилизованного контента (FOUC)
При использовании @font-face вы указываете браузеру сделать HTTP-запрос на требуемый файл шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, указанные в разметке, он строит объектную модель документа (DOM) в реальном времени. Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и оборудования пользователя.
В ожидании ресурса шрифта браузер выберет отображение текстового содержимого HTML перед фактическим его получением. Это приводит к появлению нестилизованного содержимого (FOUC). Эти вспышки могут сильно раздражать ваших посетителей. Иконочные шрифты обычно назначают свои глифы кодовым точкам за пределами нормального диапазона, в котором работают большинство обычных шрифтов. Однако, если они этого не сделают, возможно, что случайные символы или глифы появятся вместо ваших значков до того, как шрифт будет полностью загружен.
Примечание. Можно использовать более новые директивы, например, preload, для ресурсов шрифтов, чтобы избежать FOUC. Однако это не решает других проблем, описанных в этой статье, и не рекомендуется.
Доступность
Шрифты иконок, как известно, имеют плохую доступность и могут разочаровать тех, кто полагается на вспомогательные технологии.
Обработка как текст. Браузер рассматривает шрифты как текст, потому что именно такими и должны быть шрифты. С годами программы чтения с экрана становились все умнее, но им все еще трудно различать, что такое разборчивый текст, а что — пиктограмма. Большинство программ чтения с экрана будут читать вслух текст, вставленный с помощью CSS, поэтому, когда они сталкиваются с иконками, они могут озвучить как-то «непроизносимо» или могут полностью пропустить фрагмент текста.
Переопределения таблиц стилей. Люди с нарушениями зрения часто используют настраиваемые таблицы стилей для переопределения стилей по умолчанию для посещаемых ими веб-сайтов, чтобы упростить их использование. Это может включать изменение цветовых схем, увеличение размера шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки неконтекстным образом, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заставит ваши иконки полностью исчезнуть, что потенциально сделает ваш веб-сайт непригодным для использования.
Невозможность предоставить метаданные. Процесс внедрения шрифта иконок в Интернете требует использования псевдоэлементов ::before или ::after. Семантически псевдоэлементы ::before и ::after предназначены для добавления декоративного содержимого к существующему элементу. Для шрифта иконок это имеет смысл, если иконка используется в контексте с другим элементом. Однако во многих случаях иконка используется в качестве основного элемента. Например, «х» для «закрыть» или «домик» для возвращения на главную страницу. Сами по себе эти иконки не предоставляют никакой семантической информации об их содержании; вы не можете обозначить их или описать их напрямую.
Размер и поддерживаемость
Шрифты иконок — это затратный актив. Каждый раз, когда посетитель загружает ваш шрифт, он загружает все иконки, которые вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Уже сам по себе этот факт делает работу со шрифтами иконок сложными и довольно раздражающими. Если ваш шрифт содержит 200 иконок, а вы используете 10 из них, вы заставляете посетителей загружать 190 иконок, которые они никогда не увидят. Это ухудшит впечатления посетителя из-за увеличения времени загрузки и увеличения FOUC.
Поддержание шрифта иконок означает добавление и удаление иконок по мере необходимости, чтобы минимизировать размер шрифта и последующих таблиц стилей. Это также означает, что каждый раз, когда вы обновляете шрифт, вам необходимо аннулировать кеш посетителей и заставлять их повторно загружать шрифт.
Ухудшение визуального качества
Все современные браузеры и операционные системы в той или иной степени используют сглаживание текста. Текстовое сглаживание не зависит от того, состоит ли ваш шрифт из букв и цифр или пиктограмм. Это может иметь негативные побочные эффекты с точки зрения визуального качества, особенно если вы складываете глифы для создания многоцветных значков. Ваши иконок могут выглядеть размытыми или смещенными.
Трудности стилизации / позиционирования
Шрифты иконок — это в первую очередь шрифты, а во вторую — иконки. Это означает, что ваши иконки наследуют правила CSS, такие как font-size, letter-spacing, line-height и т.д. Это может сделать позиционирование иконки более сложным и менее последовательным. Кроме того, глифы шрифтов значков являются монохромными, что означает, что любые стилистические изменения, которые вы вносите, влияют на весь глиф.
SVG спешат на помощь!
С выпуском версии браузера Microsoft Edge на базе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками в отношении масштабирования от Internet Explorer и до Chromium Edge. И угадайте, что? SVGs являются удивительным решением для веб-иконок!
Иконки просто работают
Данные изображения SVG хранятся непосредственно в HTML-документе. Как только браузер обрабатывает его, он отображает его. Вам не нужно ждать завершения других HTTP-запросов, как в случае со шрифтами иконок.
Лучшая доступность
SVG имеют встроенные функции доступности, которые дают им преимущество перед использованием шрифтов иконок.
Они семантически являются элементами изображения.
Предоставить метаданные очень просто. Просто укажите элемент title или desc в контейнере SVG. А поскольку SVG — это просто элементы HTML, вы можете легко использовать атрибуты ARIA, например aria-labelledby.
Поддерживаемость
Если сравнивать один к одному, коллекция из 100 SVG по сравнению с WOFF2 из 100 иконок будет больше. Однако преимущества SVG легко перевешивают реализацию шрифтов иконок.
Используя SVG, вы будете включать только те иконки, которые требуются для этой отдельной страницы, непосредственно в код. Самый эффективный способ сделать это — использовать элемент defs для однократного определения иконок, а затем ссылаться на них с помощью этого элемента use. Вы также можете напрямую встроить иконки SVG, однако, если вы используете одну и ту же иконку несколько раз на одной странице, вы просто увеличиваете общий вес страницы.
Примечание. Если вы создаете одностраничное приложение (SPA), обязательно изучите правильные методы разделения кода, чтобы уменьшить размеры пакетов.
Еще одно преимущество заключается в том, что вам не нужно поддерживать шрифт и поддерживающие его файлы CSS за пределами сайта. Обычной практикой для тех, кто использует шрифты иконок, является выбор нужных иконок и восстановление меньшего шрифта, включающего только эти иконки. Использование SVG иконок позволяет делать это в базе кода без необходимости создания ресурсов шрифтов во внешних инструментах.
Резкие изображения
SVG — это прямые векторные изображения. Методы сглаживания, используемые вашим браузером или операционной системой для текста, не влияют на SVG, и ваши иконки будут заметно четче.
Полный контроль CSS
С SVG у вас есть доступ ко всем тем же элементам управления CSS, что и со шрифтом, и многому другому! Вы можете напрямую указать определенные части иконки, состоящей из нескольких частей, и применить к каждой из них свой стиль. Вы также можете использовать элементы управления CSS, специфичные для SVG, например, свойство stroke. Кроме того, на SVG не влияют текстовые правила CSS.
Прочие соображения
Чтобы полностью поддержать использование SVG на вашем сайте, убедитесь, что вы следуете таким рекомендациям:
Оптимизируйте свои SVG-изображения — пропустите SVG-изображения через оптимизатор, чтобы уменьшить размер. (Большинство, если не все библиотеки иконок, которые предлагают пакеты SVG, делают это по умолчанию.)
Включите сжатие — настройте сервер для отправки всех текстовых ресурсов (HTML, JS, CSS) с помощью Brotli (или GZIP).
Эффективное кэширование — установите соответствующие заголовки кеширования, чтобы посетители загружали файлы только по мере их изменения. Поскольку ваши SVG-файлы будут частью ваших файлов HTML и / или JS, вам нужно, чтобы посетители загружали их снова, только если они изменятся.
Начните работу с иконками SVG
Большинство основных библиотек иконок предлагают пакеты SVG библиотеки. Две популярные библиотеки иконок, Material Design Icons и Font Awesome, имеют пакеты, которые можно установить через npm.
Если вы используете фреймворк, многие из основных библиотек иконок также выпустили пакеты, так что вы можете начать работу довольно быстро. Например, если вы используете React, для иконок Material Design и Font Awesome есть простые решения:
Иконки Material Design- @mdi/react & @mdi/js
import Icon from '@mdi/react';
import { mdiCoffee } from '@mdi/js'; const element = <Icon path={mdiCoffee} size={1} />;Font Awesome — @fortawesome/react-fontawesome & @fortawesome/free-solid-svg-icons
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons'; const element = <FontAwesomeIcon icon={faCoffee} />;Заключение
Продолжение использования шрифтов иконок наносит ущерб интересам ваших посетителей и отнимает у вас время. Заменяя существующую реализацию шрифтов иконок на SVG, вы помогаете людям использовать вспомогательные технологии, улучшая качество, четкость и надежность иконок и сокращая время на поддержку устаревших ресурсов. И если вы случайно наткнулись на эту статью, пытаясь определить, следует ли вам использовать шрифт иконок или нет, я надеюсь, что ответ теперь очевиден.
Автор: Michael Irigoyen
Источник: www.irigoyen.dev
Редакция: Команда webformyself.