CSS size-adjust для @font-face

CSS size-adjust для @font-face

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

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

В этом примере для отображения высот употребляются инструменты отладки макета сетки CSS Chrome DevTools.

В этом посте исследуется новейший дескриптор шрифтов CSS под заглавием size-adjust, доступный в Chromium 92 и Firefox 89; (см. caniuse для получения крайней поддержки). Он также показывает несколько методов поправить и восстановить размеры шрифта для наиболее комфортного взаимодействия с юзером, согласованных систем дизайна и наиболее прогнозируемого макета странички. Одним из принципиальных вариантов использования является оптимизация рендеринга веб-шрифтов для предотвращения кумулятивного сдвига макета (CLS).

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

Разница результатов в высоте.

Смещение зрительно раздражающего контента.

Перемещение интерактивных мотивированных областей (раскрывающийся перечень прыгает!).

Как масштабировать шрифты при помощи size-adjust

Введение в синтаксис:

CSS

12345@font-face {  font-family: «Adjusted Typeface»;  size-adjust: 150%;  src: url(some/path/to/typeface.woff2) format(‘woff2’);}

Создаем пользовательский шрифт с именованием «Adjusted Typeface».

Использоуем регулировку размера для роста всякого глифа до 150% от их размера по дефлоту.

Влияем лишь на один импортированный шрифт.

Используйте обозначенный выше пользовательский шрифт последующим образом:

CSS

123h1 {  font-family: «Adjusted Typeface»;}

Предупреждение: Если 2-ой заголовок в приведенной выше демонстрации не больше первого, ваш браузер не поддерживает регулировку размера.

Устранение заморочек с CLS при помощи бесшовной подмены шрифтов

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

READ
Core Web Vitals никогда не станут основными факторами ранжирования Google

В примере слева есть сдвиг макета, в правом — нет.

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

Больше контента значит больший возможный сдвиг макета при смене шрифтов

Помещая size-adjust в правило @font-face, устанавливаем глобальную настройку глифа для начертания шрифта. Верный выбор времени приведет к наименьшим зрительным изменениям и беспрепятственному обмену. Чтоб сделать плавный обмен, отрегулируйте вручную либо попытайтесь этот калькулятор регулировки размера от Malte Ubl.

Изберите веб-шрифт Гугл, потом возвратите за ранее настроенный фрагмент @font-face.

Сначала этого поста неувязка с размером шрифта была исправлена способом проб и ошибок. size-adjust увеличивался в начальном коде до того времени, пока этот же заголовок в Arial не показывал те же 64 пикселя, что и Press Start 2P. Я выровнял два шрифта по мотивированному размеру шрифта.

CSS

1234567891011@font-face {  font-family: ‘Adjusted Arial’;  size-adjust: 86%;   src: local(Arial);} @font-face {  font-family: ‘Cookie’;  size-adjust: 90.25%;  src: url(…woff2) format(‘woff2’);}

Калибровка шрифтов

Вы, как создатель, определяете цель (и) калибровки для нормализации шкалы шрифтов. Вы сможете восстановить шрифт Times, Arial либо системный шрифт, а потом настроить пользовательские шрифты для соответствия. Либо вы сможете настроить локальные шрифты в согласовании с тем, что вы загружаете. Стратегии калибровки size-adjust:

Удаленная цель: настроить локальные шрифты в согласовании с загруженными шрифтами.

Локальная цель: адаптировать загруженные шрифты к локальным мотивированным шрифтам.

Пример 1: Удаленная цель

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

READ
Почему лучше не размещать сайты на общем хостинге

CSS

1234567891011121314@font-face {  font-family: «Adjusted Regular Arial For Brand»;  src: local(Arial);  size-adjust: 90%;} @font-face {  font-family: «Rad Brand»;  src: url(some/path/to/a.woff2) format(‘woff2’);} html {  font-family: «Rad Brand», «Adjusted Regular Arial For Brand»;}

В этом примере локальный шрифт Arial корректируется в ожидании загруженного пользовательского шрифта для плавной подмены.

Эта стратегия имеет преимущество в том, что дает дизайнерам и разрабам один и этот же шрифт для конфигурации размера и типографики. Шрифт Brand — это цель калибровки. Это хорошая новость для дизайн-систем.

Внедрение шрифта Brand в качестве цели — это также механизм работы калькулятора Мальте. Изберите шрифт Гугл, и он высчитает, как настроить Arial для плавной подмены. Вот вам наглядный пример Roboto CSS из калькулятора, где шрифт Arial загружен и назван «Roboto-fallback»:

CSS

12345@font-face {    font-family: «Roboto-fallback»;    size-adjust: 100.06%;    src: local(«Arial»);}

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

Последующий пример, предоставляет 2 настроенных локальных запасных шрифта в ожидании загрузки шрифта Brand.

CSS

1234567891011121314151617181920@font-face {    font-family: «Roboto-fallback-1»;    size-adjust: 100.06%;    src: local(«Arial»);} @font-face {    font-family: «Roboto-fallback-2»;    size-adjust: 99.94%;    src: local(«Arimo»);} @font-face {  font-family: «Roboto Regular»;  src: url(some/path/to/roboto.woff2) format(‘woff2’);} html {  font-family: «Roboto Regular», «Roboto-fallback-1», «Roboto-fallback-2»;}

Пример 2: Локальная цель

Разглядим последующий фрагмент, который настраивает шрифт Brand для соответствия Arial:

CSS

123456789@font-face {  font-family: «Rad Brand — Adjusted For Arial»;  src: url(some/path/to/a.woff2) format(‘woff2’);  size-adjust: 110%;} html {  font-family: «Rad Brand — Adjusted For Arial», Arial;}

У данной для нас стратегии есть преимущество отрисовки без каких-то корректировок, а потом корректировки всех входящих шрифтов для соответствия.

READ
Для завершения переноса сайтов на mobile-first индекс потребуется еще год

Наиболее узкая настройка с ascent-override, descent-override и line-gap-override

Если общего масштабирования глифов недостаточно для опции вашего дизайна либо стратегии загрузки, вот несколько наиболее тонких характеристик опции, которые работают вкупе с настройкой размера. Характеристики ascent-override, descent-override и line-gap-override в истинное время реализованы в Chromium 87 и Firefox 89.

CSS size-adjust для @font-face

ascent-override

Дескриптор ascent-override описывает высоту над базисной линией шрифта.

CSS

12345@font-face {  font-family: «Ascent Adjusted Arial Bold»;  src: local(Arial Bold);  ascent-override: 71%;}

Красноватый заголовок (без корректировок) имеет место над большими знаками A и O, в то время как голубий заголовок был скорректирован так, чтоб его высота плотно прилегала к общей ограничительной рамке.

descent-override

Дескриптор descent-override описывает высоту ниже базисной полосы шрифта.

CSS

12345@font-face {  font-family: «Ascent Adjusted Arial Bold»;  src: local(Arial Bold);  descent-override: 0%;}

Красноватый заголовок (без корректировок) имеет место под базисными линиями D и O, в то время как голубий заголовок был скорректирован так, чтоб его буковкы плотно прилегали к базисной полосы.

line-gap-override

Дескриптор line-gap-override описывает метрику межстрочного промежутка для шрифта.

CSS

12345@font-face {  font-family: «Line Gap Adjusted Arial»;  src: local(Arial);  line-gap-override: 50%;}

Красноватый заголовок (нескорректированный) не имеет переопределения межстрочного промежутка, на самом деле, он равен 0%, в то время как голубий заголовок был скорректирован на 50%, создавая место над и под знаками соответственно.

Объединим все вкупе

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

Предупреждение. Если какая-либо из перечисленных выше демонстраций не указывает различий, то ваш браузер не поддерживает переопределения.

Заключение

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

Создатель: Adam Argyle

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

Читайте нас в Telegram, VK, Yandex.Дзен

Источник

Оценить статью
Блог о самом интересном.