Должен ли я использовать JavaScript для загрузки веб-шрифтов?

Dart для программистов JavaScript

От автора: когда они были впервые представлены, веб-шрифты являлись в первую очередь функцией CSS, и многие веб-разработчики всегда загружали их с помощью CSS (и никак иначе). Но в последнее десятилетие поведение загрузки веб-шрифтов по умолчанию во многих браузерах сделало методы, предназначенные только для CSS, небезопасной игрой с рендерингом текста страницы, и вдумчивые разработчики переключились на более безопасные методы JavaScript. В последнее время поддержка браузерами новых и более безопасных стратегий для чистого CSS заставила некоторых разработчиков задуматься: нужно ли загружать с помощью методов JavaScript шрифт? Полезны ли они? Давайте разберемся.

Эпохи адаптивной загрузки веб-шрифтов

1997: с веб-шрифтами с помощью чистого CSS было все в порядке

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

2008: для веб-шрифтов рекомендуется JavaScript

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

2016: ситуация с CSS-шрифтами больше не была столь ужасной

Firefox был первым веб-браузером, который в 2011 году ввел задержку невидимости для загрузки своих шрифтов — если веб-шрифт не загружался в течение трех секунд, отображался резервный шрифт. Chrome последовал его примеру в 2014 году, а Safari стал последним основным браузером, принявшим задержку в 2016 году. Примечательно, что этот год стал годом, когда CSS-методы для загрузки веб-шрифтов больше не были единственной точкой отказа для веб-страниц. Однако разработчики по-прежнему имели ограниченный контроль над видимостью текста во время загрузки шрифта.

2018: чистый CSS снова в порядке!

С принятием font-display 2018 год ознаменовал новую эпоху поведения загрузки шрифтов. Наш спаситель, font-display — это простой CSS-дескриптор, который позволяет разработчикам вернуть контроль над поведением невидимости текста при загрузке веб-шрифтов.

@font-face { font-family: Noto Serif; src: url(notoserif.woff2) format('woff2'), url(notoserif.woff) format('woff'); font-display: swap;
}

Благодаря улучшающейся поддержке браузерами, font-display позволяет обойтись без JavaScript, как единственного средства для обеспечения видимости текста во время загрузки веб-шрифта! Он создает основу для загрузки шрифтов, которая будет «достаточно хорошей» для многих сайтов.

Почему мы все еще используем JavaScript?

Это правда, что использование дескриптора font-display может привести к достижению приемлемого уровня контроля загрузки веб-шрифтов, но мы можем добиться большего! Давайте рассмотрим некоторые дополнительные улучшения, которые мы можем выполнить:

1. Групповая перерисовка

Когда вы загружаете несколько файлов шрифтов для одной гарнитуры, каждый запрос может запускать отдельную перерисовку и переформатирование. Уменьшите количество действий на странице, сгруппировав все в одну перерисовку. JavaScript для этого может выглядеть примерно так:

if ("fonts" in document) { var font = new FontFace( "Noto Serif", "url(notoserif.woff2) format('woff2'), url(notoserif.woff) format('woff')" ); var fontBold = new FontFace( "Noto Serif", "url(notoserif-bold.woff2) format('woff2'), url(notoserif-bold.woff) format('woff')", { weight: "700" } ); Promise.all([ font.load(), fontBold.load() ]).then(function(loadedFonts) { // Render them at the same time loadedFonts.forEach(function(font) { document.fonts.add(font); }); });
}

2. Адаптация к предпочтениям пользователя

Вы можете использовать предпочтение отказа от шрифтов Save-Data, когда пользователь включил режим Data Saver.

function loadFonts() { /* Примечание: Повторно используйте здесь сниррет кода Group Repaints, приведенный выше */
} if( navigator.connection && navigator.connection.saveData ) {
} else { loadFonts();
}

Или вы можете использовать предпочтение prefers-reduced-motion (поддержка браузерами), чтобы отказаться от загрузки веб-шрифтов, когда пользователь включил опцию специальных возможностей Reduce Motion.

Чтобы включить это на Mac OS, выберите Системные настройки> Специальные возможности> Reduce Motion. На iOS: Настройки> Общие> Специальные возможности> Reduce Motion. Можно сказать, что перекомпоновка веб-шрифта — это перемещение, но это улучшило бы стабильность страницы.

function loadFonts() { /* Примечание: Повторно используйте здесь сниррет кода Group Repaints, приведенный выше */
} if( "matchMedia" in window && window.matchMedia("(prefers-reduced-motion: reduce)").matches ) { // не делаем ничего
} else { loadFonts();
}

Для дополнительной поддержки я мог бы представить использование Paint Timing API только для отказа от рендеринга, если веб-шрифт завершает загрузку после записи в журнал first-paint. Но, честно говоря, это может быть немного слишком, даже для меня.

3. Адаптация к контексту пользователя

Вы также можете использовать Network Information API ( поддержка браузерами), чтобы отказаться от шрифтов на медленных соединениях. Подробнее читайте в документации по API Network Information на сайте MDN.

function loadFonts() { /* Примечание: Повторно используйте здесь сниррет кода Group Repaints, приведенный выше */
} if( navigator.connection && (navigator.connection.effectiveType === "slow-2g" || navigator.connection.effectiveType === "2g") ) { // не делаем ничего
} else { loadFonts();
}

Обратите внимание, что у вас может возникнуть искушение подписаться на событие «change», представленное в Network Information API. Осторожно! Вам не нужно, чтобы загрузка веб-шрифтов запускалась слишком поздно, когда пользователь уже может быть поглощен чтением! Чем позже происходит перекомпоновка веб-шрифта, тем более разрушительным это кажется.

4. Использование сторонних хостингов

К сожалению, на момент на написания статьи ни один из известных сторонних хостингов веб-шрифтов не поддерживал дескриптор font-display для чисстого CSS . Я бы рекомендовал придерживаться подходов JavaScript при использовании этих сервисов.

JavaScript никуда не уходит

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

Автор: Zach

Источник: https://www.filamentgroup.com/

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