От автора: когда они были впервые представлены, веб-шрифты являлись в первую очередь функцией 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.
