Вт. Авг 3rd, 2021

Закончите использование иконочных шрифтов

От создателя: всего за год до того, как в 1991 году была запущена 1-ая веб-страница, 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

JavaScript

Font Awesome — @fortawesome/react-fontawesome & @fortawesome/free-solid-svg-icons

JavaScript

Заключение

Продолжение использования шрифтов иконок наносит вред интересам ваших посетителей и отнимает у вас время. Заменяя существующую реализацию шрифтов иконок на SVG, вы помогаете людям использовать вспомогательные технологии, улучшая качество, четкость и надежность иконок и сокращая время на поддержку устаревших ресурсов. И если вы случаем наткнулись на эту статью, пытаясь найти, следует ли вам использовать шрифт иконок либо нет, я надеюсь, что ответ сейчас очевиден.

Автор: Michael Irigoyen

Редакция: Команда webformyself.

Докладывает webformyself.com

от Admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *