Java, UX, HTML, CSS, WEB-design

Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS


  • Барри Поллард

  • 0 Комментарии

Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS

  • 9 минут чтения

  • CSS, шрифты, браузеры, производительность, основные веб-жизненные показатели

Краткое резюме ↬

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

Загрузка шрифтов долгое время была пугалом веб-производительности, и здесь действительно нет хороших вариантов здесь. Если вы хотите использовать веб-шрифты, вы можете выбрать в основном Flash of Invisible Text (также известный как FOIT), где текст скрыт до тех пор, пока шрифт не загрузится, или Flash of Unstyled Text (FOUT), где вы сначала используете резервный системный шрифт, а затем обновляете его до веб-шрифт при загрузке. Ни один из вариантов на самом деле не «выиграл», потому что, честно говоря, ни один из них не является удовлетворительным.

не было font-display Предполагается решить это?

То font-display собственность для @font-face дал этот выбор веб-разработчику, в то время как ранее браузер решил, что (в прошлом IE и Edge предпочитали FOUT, тогда как другие браузеры предпочитали FOIT). Однако помимо этого это не решило проблему.

Ряд сайтов переехал на font-display: swap когда это впервые появилось, и Google Fonts даже сделал его шрифтом по умолчанию. в 2019 году. Мысль здесь заключалась в том, что для производительности лучше отображать текст как можно быстрее, даже если это резервный шрифт, а затем заменить шрифт, когда он наконец загрузится.

Я тоже поддерживал это тогда, но меня все больше разочаровывает «эффект гидратации», когда веб-шрифт загружается, а символы расширяются (или сжимаются) из-за различий между шрифтами. Smashing Magazine, как и большинство издателей, использует веб-шрифты, и на приведенном ниже снимке экрана показана разница между первоначальным рендерингом (с резервными шрифтами) и окончательным рендерингом (с веб-шрифтами):

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

Статья Smashing Magazine с резервным шрифтом и полноценными веб-шрифтами. (Большой превью)

Теперь, когда их кладут рядом, веб-шрифты выглядят значительно лучше и соответствуют бренду Smashing Magazine. Но мы также видим, что есть немало разница в расположении текста с двумя шрифтами. Шрифты очень разных размеров, и из-за этого содержимое экрана смещается. В наш век Core Web Vitals и Cumulative Layout Shifts, которые (совершенно справедливо!) признаны вредными для пользователей, font-display: swap из-за этого плохой выбор.

я вернулся к font-display: block на сайтах, за которыми я слежу, так как я действительно нахожу сдвиг текста довольно резким и раздражающим. Хотя это правда, что block сдвиги не остановит (шрифт по-прежнему отображается невидимым текстом), по крайней мере сделает их менее заметными для пользователя. Я также оптимизировал загрузку шрифтов, предварительно загрузив шрифты, которые я сделал как можно меньше с помощью самостоятельные подмножества шрифтов — поэтому посетители часто видели резервные шрифты только в течение небольшого промежутка времени. Для меня «период блокировки» swap был слишком коротким, и я, честно говоря, предпочел бы подождать немного дольше, чтобы получить правильный первоначальный рендеринг.

Еще после прыжка! Продолжить чтение ниже ↓

С использованием font-display: optional Может решить FOIT и FOUT — по цене

Другой вариант — использовать font-display: optional. Эта опция в основном делает веб-шрифты необязательными или, другими словами, если шрифта нет к тому моменту, когда он нужен странице, браузер никогда не заменяет его. С этой опцией мы избегаем как FOIT, так и FOUT в основном используя только уже загруженные шрифты.

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

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

Таким образом, все варианты шрифтов имеют свои недостатки, в том числе возможность вообще не использовать веб-шрифты или использовать системные шрифты (что ограничивает — но, возможно, не так ограничивает, как многие думают!).

Как сделать ваш запасной шрифт более близким к вашему шрифту

Святой Грааль загрузки веб-шрифтов сделать резервный шрифт ближе к реальному веб-шрифту максимально уменьшить заметное смещение, чтобы с помощью swap оказывает меньшее влияние. Хотя мы никогда не сможем полностью избежать сдвигов, мы можем сделать лучше, чем на скриншоте выше. Приложение Font Style Matcher от Моника Динкулеску часто цитируется в статьях о загрузке шрифтов и дает фантастическое представление о том, что здесь должно быть возможно. Это поможет вам наложение одного и того же текста двумя разными шрифтами чтобы увидеть, насколько они отличаются, и настроить параметры шрифта, чтобы они были более точно выровнены:

Скриншоты Font Style Matcher, показывающие два набора поверх текста, наложенные друг на друга, причем верхний имеет большие различия, а нижний имеет очень похожий текст.

Скриншоты Font Style Matcher со значениями по умолчанию, одинаковыми настройками для двух шрифтов (вверху) и скорректированными настройками для лучшего совпадения (внизу). (Большой превью)

К сожалению, проблема с сопоставлением стиля шрифта заключается в том, что мы не можем применить эти стили CSS. Только к резервным шрифтам, поэтому нам нужно использовать JavaScript и API FontFace.load, чтобы применить (или отменить) эти различия стилей когда загружается веб-шрифт.

Объем кода невелик, но все же кажется, что это требует немного больше усилий, чем должно быть. Хотя есть и другие преимущества и возможности использования JavaScript API для этого, как объясняется Зак Лезерман в этом фантастическом выступлении еще в 2019 году — вы можете уменьшить количество перекомпоновок и справиться с data-server режим и prefers-reduced-motion хотя это (обратите внимание, что оба с тех пор подвергались воздействию CSS после этого выступления).

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

font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Gia,serif;

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

Приближается лучшее решение

Итак, это краткий обзор того, как обстоят дела на сегодняшний день. Тем не менее, есть немного дыма, начинающего появиться на горизонте.

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

См. https://t.co/mdRW2BMg6A от @крамфорс для демонстрации (Chrome Canary/FF Nightly с флажками) pic..com/hEg1HfUJlT

— Эдди Османи (@addyosmani) 22 мая 2021 г.

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

Это именно то, что новый набор дескрипторы шрифта предлагается как часть модуля шрифтов CSS уровня 5. Они применяются к @font-face объявления, в которых определен отдельный шрифт.

Саймон Хирн написал об этом предлагаемом обновлении спецификации дескрипторов шрифта, которое включает четыре новых дескриптора: ascent-override, descent-override, line-gap-override и advance-override (с тех пор как упал). Вы можете поиграть с игровой площадкой F-mods, созданной Саймоном, чтобы загрузить свои собственные и резервные шрифты, а затем поиграть с переопределениями, чтобы получить идеальное соответствие.

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

Но, кажется, все снова меняется. Совсем недавно, advance-override был исключен в пользу предстоящий size-adjust дескриптор что позволяет нам уменьшить сдвиги макета, сопоставив запасной шрифт и основной веб-шрифт с помощью масштабного коэффициента для глифов (в процентах).

Как это работает? Допустим, у вас есть следующий CSS:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

h1 {
    font-family: Lato, Arial, sans-serif;
}

Тогда вам нужно создать @font-face для резервного шрифта Arial и примените дескрипторы регулятора к этому. Вы получите следующий фрагмент CSS:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
    font-family: "Lato-fallback";
    size-adjust: 97.38%;
    ascent-override: 99%;
    src: local("Arial");
}

h1 {
    font-family: Lato, Lato-fallback, sans-serif;
}

Это означает, что когда Lato-fallback используется изначально (поскольку Arial является local шрифт и может использоваться сразу без дополнительной загрузки), то size-adjust и ascent-override настройки позволяют приблизить его к шрифту Lato. это дополнительная @font-face декларацию написать, но, безусловно, это намного проще, чем те обручи, через которые нам приходилось прыгать раньше!

В целом есть четыре основных @font-face дескрипторы включено в эту спецификацию: size-adjust, ascent-override, descent-override, и line-gap-override с несколькими другими, все еще рассматриваемыми для нижнего индекса, верхнего индекса и других вариантов использования.

Мальте Убл создал очень полезный инструмент для автоматического расчета этих настроек с учетом двух шрифтов и браузера, который поддерживает эти новые настройки (подробнее об этом чуть позже!). Как отмечает Мальте, компьютеры хороши в таких вещах! В идеале мы могли бы также предоставить эти настройки для распространенных шрифтов веб-разработчикам, например, дать эти подсказки в коллекциях шрифтов, таких как Google Fonts? Это, безусловно, помогло бы увеличить принятие.

Теперь разные операционные системы могут немного отличаться разные настройки шрифта и получить их точно правильно — практически невыполнимая задача, но это не цель. Цель состоит в том, чтобы сократить разрыв, используя font-display: swap уже не такой резкий опыт, но нам не нужно впадать в крайности optional или нет веб-шрифтов.

Когда мы можем начать использовать это?

Три из этих настроек имеют уже поставляется в Chrome с версии 87, хотя ключ size-adjust дескриптор пока недоступен ни в одном стабильном браузере. Тем не мение, У Chrome Canary это есть, как и у Firefox под флагом так что это не какая-то абстрактная, далекая концепция, а нечто, что может приземлиться очень скоро.

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

Chrome заявил о своем намерении сделать size-adjust доступен в Chrome 92, который должен быть выпущен 20 июля, что, по-видимому, указывает на то, что он почти готов.

Итак, пока не совсем готово, но похоже, что это произойдет в самом ближайшем будущем. А пока поиграйте с демонстрацией в Chrome Canary и посмотрите, сможет ли она хоть немного приблизиться к решению ваших проблем с загрузкой шрифтов и последствиям CLS, которые они вызывают.

Сокрушительная редакция
(вф, ил)

Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS

Пожалуйста оцените статью, и напишите комментарий.

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

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

Ваш адрес email не будет опубликован.

Краткое описание по статье Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS

Название: Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS . Краткое описание: ⭐ Барри Полл . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»