Ср. Дек 1st, 2021

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

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

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

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

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

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

FOIT, FOUT, FOFT

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

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

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

Методы размещения шрифтов

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

Внедрение облачного хранилища.

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

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

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

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

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

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

Загрузка шрифтов из Гугл Fonts немного лучше, потому что она предоставляет font-display: swap. Вот пример, в котором мы загружаем Lato из Гугл 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.

CSS

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

CSS

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

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 для загрузки шрифтов. Механика последующая:

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

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

CSS

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

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

CSS

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

JavaScript

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

JavaScript

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

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

CSS

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

JavaScript

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

CSS

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

JavaScript

CSS Font Loader API против FontFaceObserver

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

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

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

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

JavaScript

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

FOFT

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

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

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

Шаг 3. Загрузите другие шрифты.

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

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

CSS

JavaScript

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

CSS

JavaScript

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

JavaScript

Критичный FOFT

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

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

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

CSS

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

CSS

JavaScript

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

CSS

JavaScript

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

JavaScript

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

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

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

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

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

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

CSS

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

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

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

В перечне стратегий Зак также упомянул, что предпочитает использовать 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

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

от Admin

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

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