Лучшие стратегии загрузки шрифтов и способы их реализации

Лучшие стратегии загрузки шрифтов и способы их реализации

От автора: в этой статье я хочу поделиться с вами лучшими стратегиями загрузки и тем, как их все реализовать.

Зак Лизерман составил полный список стратегий загрузки шрифтов, которые широко используются в области веб-разработки. Зак рекомендует две стратегии:

FOUT with Class — лучший подход для большинства ситуаций. (Работает независимо от того, пользуемся ли мы хостингом шрифтов или размещаем собственные шрифты.)

Critical FOFT — наиболее производительный подход. (Работает, только если мы размещаем собственные шрифты.)

Прежде чем мы углубимся в эти две стратегии, нам нужно прояснить аббревиатуры, чтобы вы поняли, о чем говорит Зак.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

FOIT, FOUT, FOFT

FOIT означает вспышка невидимого текста. Когда загружаются веб-шрифты, мы скрываем текст, чтобы пользователи ничего не видели. Мы показываем текст только тогда, когда загружены веб-шрифты.

FOUT означает вспышка нестилизованного текста. Когда загружаются веб-шрифты, мы показываем пользователям системный шрифт. Когда веб-шрифт загружается, мы меняем обратно желаемый веб-шрифт.

FOFT означает вспышка искусственного текста. Это сложно и требует дополнительных объяснений. Мы поговорим об этом подробно, когда перейдем к разделу FOFT.

Способы размещения шрифтов

Есть два основных способа размещения шрифтов:

Использование облачного хранилища.

Самостоятельное размещение шрифтов.

То, как мы загружаем шрифты, сильно различается в зависимости от того, какой вариант вы выберете.

Загрузка шрифтов с помощью шрифтов, размещенных в облаке

Часто проще размещать шрифты в облаке. Провайдер даст нам ссылку для загрузки шрифтов. Мы можем просто вставить эту ссылку в наш HTML и получить наш веб-шрифт. Вот пример, в котором мы загружаем веб-шрифты из Adobe Fonts (ранее известного как Typekit).

К сожалению, это не лучший подход. href блокируется браузером. Если загрузка веб-шрифта зависает, пользователи не смогут ничего делать, пока ждут.

Typekit используется для предоставления JavaScript, который загружает шрифт асинхронно. Но такой подход больше не поддерживается. (Код все еще работает, но я понятия не имею, перестанет ли он работать и когда это произойдёт.)

Загрузка шрифтов из Google Fonts немного лучше, потому что она предоставляет font-display: swap. Вот пример, в котором мы загружаем Lato из Google Fonts.

Загрузка шрифтов с помощью автономных шрифтов

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

Однако есть дешевый способ получить шрифты. Design Cuts время от времени проводит распродажи со шрифтами, где вы можете получить безумно качественные шрифты всего за 29 долларов за комплект. Каждый комплект может содержать до 12 шрифтов. Мне удалось получить классические шрифты, такие как Claredon, DIN, Futura, и целый ряд шрифтов, с которыми я могу экспериментировать, через их рекламные объявления о распродажах.

Если мы хотим самостоятельно размещать шрифты, нам нужно понять еще две концепции: @font-face и font-display: swap.

@font-face

@font-face позволяет нам объявлять шрифты в CSS. Если мы хотим самостоятельно размещать шрифты, нам нужно использовать @font-face для объявления шрифтов. В этом объявлении мы можем указать четыре вещи:

font-family: Это сообщает CSS (и JavaScript) имя шрифта.

src: Путь к поиску шрифта для загрузки.

font-weight: Толщина шрифта. По умолчанию 400, если не указано.

font-style: Выделять ли шрифт курсивом. Если не указано иное, по умолчанию используется обычный режим.

Для src нам нужно указать несколько форматов шрифтов. Для практического уровня поддержки браузера мы можем использовать woff2 и woff. Вот пример, в котором мы загружаем Lato через @font-face.

Затем мы объявляем веб-шрифт в свойстве font-family.

Когда браузеры анализируют элемент с веб-шрифтом, они запускают загрузку шрифта.

font-display: swap

font-display принимает один из четырех возможных значений: auto, swap, fallback, и optional. Swap указывает браузерам отображать резервный текст до загрузки веб-шрифтов. Другими словами, swap запускает FOUT для автономных шрифтов.

В настоящее время поддержка браузерами font-display: swap довольно хороша, поэтому мы можем использовать ее в наших проектах.

Лучшие стратегии загрузки шрифтов и способы их реализации

FOUT против FOUT with Class

FOUT означает вспышку нестилизованного текста. Всегда старайтесь использовать FOUT вместо FOIT (вспышка невидимого текста), потому что пользователям лучше читать слова, написанные системными шрифтами, чем слова, написанные невидимыми чернилами. Мы упоминали ранее, что это font-display: swap дает вам возможность использовать FOUT изначально.

FOUT with Class дает те же результаты — FOUT, но использует JavaScript для загрузки шрифтов. Механика следующая:

Во-первых: загрузите системные шрифты.

Во-вторых: загрузите веб-шрифты через JavaScript.

В-третьих: при загрузке веб-шрифтов добавьте class к тегу html.

Четвертое: переключите системный шрифт на загруженный веб-шрифт.

Зак рекомендует загружать шрифты через JavaScript, даже если font-display: swap хорошо поддерживается браузером. Другими словами, Зак рекомендует использовать FOUT with Class вместо @font-face + font-display: swap. Он рекомендует FOUT with Class по трем причинам:

Можем группировать изменения цвета.

Мы можем адаптироваться к предпочтениям пользователей.

Мы можем полностью пропустить загрузку шрифтов, если у пользователей медленное соединение.

FOUT with Class (для облачных шрифтов)

Во-первых, загрузим наши шрифты как обычно из облачного хостинга. Вот пример, когда я загрузил Lato из Google Fonts:

Затем загрузим шрифты через JavaScript. Мы добавим в head раздел script, поскольку размер кода небольшой, и он в любом случае будет асинхронным.

В load-fonts.js, мы будем использовать API для загрузки шрифта. Здесь мы можем использовать Promise.all для загрузки всех шрифтов одновременно. Когда мы это делаем, мы группируем изменение цвета. Код выглядит так:

Когда шрифты загружены, мы изменяем для основного текста веб-шрифт. Мы можем сделать это через CSS, используя класс .fonts-loaded.

Обратите внимание: нам нужно использовать класс .fonts-loaded.

Мы не можем писать веб-шрифт прямо в font-family блока body; это вызовет загрузку шрифтов, что означает, что вы используете @font-face + font-display: swap. Это также означает, что JavaScript избыточен.

Если пользователи посещают дополнительные страницы сайта, значит, в их браузере уже загружены шрифты. Мы можем пропустить процесс загрузки шрифтов (чтобы ускорить процесс), используя sessionStorage.

Если мы хотим оптимизировать JavaScript для удобства чтения, мы можем использовать шаблон раннего возврата, чтобы уменьшить отступы.

FOUT with Class (для автономных шрифтов)

Во-первых, нам нужно загрузить шрифты как обычно через @font-face. Свойство font-display: swap не является обязательным, так как мы загружают шрифты через JavaScript.

Затем мы загружаем веб-шрифты через JavaScript.

Затем мы хотим изменить для основного текста веб-шрифт через CSS:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Наконец, мы пропускаем загрузку шрифтов для повторных посещений.

CSS Font Loader API против FontFaceObserver

CSS Font Loader API имеет неплохую поддержку браузеров.

Лучшие стратегии загрузки шрифтов и способы их реализации

Но, если вам нужна поддержка старых браузеров (например, IE 11 и ниже) или если вы находите API непонятным и громоздким, вы можете использовать Bramstein FontFaceObserver. Он очень легкий, поэтому особого вреда не будет.

Код выглядит так: (Это намного лучше по сравнению с CSS Font Loader API).

Обязательно используйте, fontfaceobserver.standalone.js если вы собираетесь загружать шрифты в браузерах, которые не поддерживают CSS Font Loader API.

FOFT

FOFT означает вспышка искусственного текста. Идея состоит в том, что мы разделяем загрузку шрифта на три этапа:

Шаг 1. Используйте резервный шрифт, если веб-шрифты еще не загружены.

Шаг 2: Сначала загрузите шрифт “Roman font”. (также называемый «книжный» или «обычный»). Это заменит большую часть текста. Полужирный шрифт и курсив будут подделаны браузером (отсюда «искусственный текст»).

Шаг 3. Загрузите остальные шрифты.

Использование стандартного FOFT

Сначала загружаем шрифт «Roman font»:

Затем загружаем другие шрифты. Обратите внимание: мы загружаем Lato снова, но на этот раз, мы устанавливаем, font-family для Lato вместо LatoInitial.

Опять же, мы можем оптимизировать его для повторных просмотров. Здесь мы можем добавить fonts-loaded-2к для html, так как шрифты уже загружены.

Критический FOFT

«Критическая» часть происходит от «критического CSS» — где мы загружаем только необходимый CSS перед загрузкой всех остальных. Мы делаем это, для улучшения производительности.

Когда дело доходит до типографики, критичны только буквы от A до Z (заглавные и строчные). Мы можем создать подмножество этих шрифтов с помощью unicode-range.

Когда мы создаем это подмножество, мы также можем создать отдельный файл шрифта с необходимыми символами. Вот как выглядит объявление @font-face:

Сначала мы загружаем это подмножество.

А другие файлы шрифтов мы загрузим позже.

Опять же, мы можем оптимизировать его для повторных просмотров:

Варианты критического FOFT

Зак предложил два дополнительных варианта критического FOFT:

Критический FOFT с URI данных

Критический FOFT с предварительной загрузкой

Критический FOFT с URI данных

В этом варианте мы загружаем критический шрифт («roman font» с подмножеством) с URI данных вместо обычной ссылки. Вот как это выглядит:

Критический FOFT с предварительной нагрузкой

В этом варианте мы добавляем тег link с preload для файла критического шрифта. Вот как это выглядит:

Здесь мы должны предварительно загрузить только один шрифт. Если мы загружаем более одного, мы можем отрицательно повлиять на начальное время загрузки.

В списке стратегий Зак также упомянул, что предпочитает использовать URI данных вместо preload варианта. Он предпочитает это только потому, что раньше поддержка браузером preload была плохой. Сегодня я считаю, что поддержка браузера достаточно приличная, чтобы выбрать предварительную загрузку вместо URI данных.

Лучшие стратегии загрузки шрифтов и способы их реализации

Последнее замечание от Зака

Крис исследовал эту статью по записям Зака, и Зак пожалел, что в своей исходной статье он не уделил приоритетное внимание подходу без JavaScript.

Я думаю, что статья хороша, но, та статья, на которой она основана, вероятно, немного устарела в нескольких отношениях. Я бы хотел, чтобы он уделял больше внимания подходам no-JS, когда вы используете только один или два файла шрифтов (или больше, но только 1 или 2 каждого шрифта). Я думаю, что подходы JS в настоящее время являются своего рода исключением (если вы не используете много файлов шрифтов или облачное хранилище, которое не поддерживает font-display: swap).

Это немного меняет вердикт, который я приведу в следующем разделе.

Какую стратегию загрузки шрифтов использовать?

Если вы используете облачного хранилище:

Используйте, font-display: swap, если хост предоставляет это.

В противном случае используйте FOUT with class.

Если вы размещаете свои веб-шрифты, у вас есть несколько вариантов:

@font-face + font-display: swap

FOUT with class

Стандартный FOFT

Критический FOFT

Вот как выбирать между ними:

Выбирайте @font-face + font-display:swap если вы только начинаете и не хотите связываться с JavaScript. Это самый простой вариант. Также выбирайте этот вариант, если вы используете только несколько файлов шрифтов (менее двух файлов) для каждого шрифта.

Выбирайте Standard FOFT, если вы готовы использовать JavaScript, но не хотите выполнять дополнительную работу для создания подмоножества латинского шрифта.

Выбирайте вариант Critical FOFT, если вы хотите добиться максимальной производительности.

Вот и все! Надеюсь, вы нашли все это полезным!

Автор: Zell Liew

Источник: css-tricks.com

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.