Google Fonts и font-display: особенности взаимодействия

Google Fonts и font-display: особенности взаимодействия

От автора: дескриптор font-display блоков @font-face действительно хорош. Само по себе это имеет большое значение для улучшения воспринимаемой производительности загрузки веб-шрифтов. Загрузка веб-шрифтов — сложная задача, и наличие инструмента, который работает так хорошо, как он, имеет большое значение для Интернета.

Это настолько большое дело, что Pagespeed Insights / Lighthouse от Google предупредят вас, если вы не используете его. Горькая ирония заключается в том, что их в собственных Google Fonts font display никак не используется, а ведь это наиболее часто используемый репозиторий пользовательских шрифтов в Интернете.

Даниэль Дудас так описал ситуацию: Разработчики Google предлагают использовать Lighthouse -> Lighthouse предупреждает о неиспользовании при загрузке шрифтов font-display -> Веб-страница использует шрифты Google так, как это предлагается в Google Fonts -> Google Fonts не поддерживает font-display -> Облом.

По сути, мы, разработчики, хотели бы получить font-display в блоке @font-face, который обслуживает Google, например:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Или какую-то альтернативу, которая так же проста и эффективна.

Похоже, параметры запроса это возможность

Когда вы используете Google Font, они дают вам URL, который обрабатывает таблицу стилей и заставляет шрифт работать. Например:

Они также поддерживают параметры URL для различных вещей, например, для толщины:

и подмножеств:

Так почему не сделать это…

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

Вариант: скачать и самостоятельно разместить их

Все шрифты Google имеют открытый исходный код, поэтому мы можем получить их копию, чтобы использовать все, что захотим.

Google Fonts и font-display: особенности взаимодействия

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

Вариант: извлекать и изменять

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

Умно! Хотя я не совсем уверен, как это вписывается в то, как сейчас происходит загрузка шрифтов. Поскольку мы обрабатываем загрузку этого шрифта в JavaScript, производительность загрузки зависит от того, когда и как мы загружаем скрипт, который это выполняет. Если мы собираемся сделать это, возможно, нам следует изучить использование официального веб-шрифта?

Вариант: Service Workers

Как и в предыдущем методе, мы можем извлечь шрифт и изменить его, но сделать это на уровне Service Worker, чтобы иметь возможность его кэшировать (возможно, более эффективно). Адам Лейн предложил это:

Даже Google согласен, что использование Service Workers для помощи Google Fonts — хорошая идея. Workbox, их библиотека для абстрагирования управления Service Workers, использует Google Fonts в качестве демонстрации на главной странице:

Вариант: Cloudflare Workers

Пьер-Люк Жендро решил использовать Cloudflare workers для решения этой проблемы, но затем разработал Supercharge Google Fonts с помощью Cloudflare и Service Workers, очевидно, для еще лучшей производительности. Это его репо.

Вариант: ждать @font-feature-values

Одна из причин, по которой, возможно, Google не торопится (и они говорят то же самое) — есть новое @rule CSS, называемое @font-feature-values, которое предназначено именно для этой ситуации. Вот спецификация:

Этот механизм может использоваться для установки политики отображения по умолчанию для всего семейства шрифтов и позволяет разработчикам устанавливать политику отображения для правил @ font-face, которые не находятся под их непосредственным контролем. Например, когда шрифт обслуживается сторонним поставщиком шрифтов, разработчик не контролирует правила @font-face, но все же может установить политику отображения шрифтов по умолчанию для предоставленного семейства шрифтов. Возможность установить политику по умолчанию для всего семейства шрифтов также полезна, чтобы избежать несоответствия формы шрифта, потому что политика отображения затем применяется ко всему семейству шрифтов.

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

Автор: Chris Coyier

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

PSD to HTML

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

Получить

Метки:

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

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

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree