Теперь при загрузке веб-шрифта вы можете настроить его масштаб, чтобы нормализовать размеры шрифта документа и предотвратить смещение макета при переключении между шрифтами.
Рассмотрим следующую демонстрацию , где font-size
равен 64px
, а единственная разница между каждым из этих заголовков — это font-family
. Примеры слева не были скорректированы и имеют непостоянный окончательный размер. В примерах справа используется size-adjust
, чтобы обеспечить согласованный окончательный размер 64px
.
В этом посте рассматривается новый дескриптор шрифта CSS под названием size-adjust
. Он также демонстрирует несколько способов исправления и нормализации размеров шрифтов для более удобного взаимодействия с пользователем, согласованных систем дизайна и более предсказуемого макета страницы. Одним из важных вариантов использования является оптимизация рендеринга веб-шрифтов для предотвращения кумулятивного смещения макета (CLS).
Вот интерактивная демонстрация проблемного пространства. Попробуйте изменить шрифт с помощью раскрывающегося списка и обратите внимание:
- Разница в высоте в результатах.
- Визуально резкое изменение содержания.
- Перемещение интерактивных целевых областей (раскрывающийся список прыгает!).
Как масштабировать шрифты с помощью size-adjust
Введение в синтаксис:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- Создает собственный шрифт с именем
Adjusted Typeface
. - Использует
size-adjust
для увеличения каждого глифа до 150% размера по умолчанию. - Влияет только на один импортированный шрифт.
Используйте приведенный выше пользовательский шрифт следующим образом:
h1 {
font-family: "Adjusted Typeface";
}
Устранение CLS с помощью плавной замены шрифтов
На следующей гифке посмотрите примеры слева и посмотрите, как происходит сдвиг при изменении шрифта. Это всего лишь небольшой пример с одним элементом заголовка, и проблема очень заметна.
Для улучшения рендеринга шрифтов можно воспользоваться отличным методом — замена шрифтов . Отобразите быстро загружаемый системный шрифт, чтобы сначала отобразить содержимое, а затем замените его веб-шрифтом, когда веб-шрифт завершит загрузку. Это дает вам лучшее из обоих миров: контент становится видимым как можно скорее, и вы получаете красиво оформленную страницу, не жертвуя временем пользователя на контент. Проблема, однако, заключается в том, что иногда при загрузке веб-шрифта вся страница смещается, поскольку она отображается с немного другим размером высоты поля.
Поместив size-adjust
в правило @font-face
, можно установить глобальную настройку глифа для гарнитуры шрифта. Правильно выбранное время приведет к минимальным визуальным изменениям и плавной замене. Чтобы создать плавную замену, отрегулируйте вручную или воспользуйтесь калькулятором регулировки размера от Malte Ubl .
В начале этого поста проблема с размером шрифта была решена методом проб и ошибок. size-adjust
в исходном коде был изменен до тех пор, пока тот же заголовок в Cookie
и Arial
не отображал те же 64px
, что и Press Start 2P
естественно. Я выровнял два шрифта по целевому размеру шрифта.
@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: Удаленная цель
Рассмотрим следующий фрагмент, который настраивает локально доступный шрифт так, чтобы его размер соответствовал размеру пользовательского шрифта удаленного src. Целью калибровки является удаленный пользовательский шрифт, возможно, фирменный шрифт:
@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 настраивается в ожидании загрузки пользовательского шрифта для плавной замены.
Преимущество этой стратегии заключается в том, что она предлагает дизайнерам и разработчикам один и тот же шрифт для определения размера и типографики. Марка является целью калибровки. Это отличная новость для дизайн-систем.
Калькулятор Malte также работает с использованием фирменного шрифта в качестве цели. Выберите шрифт Google, и он рассчитает, как настроить Arial для беспрепятственного переключения с ним. Вот пример Roboto CSS из калькулятора , где загружается Arial и называется «Roboto-fallback»:
@font-face {
font-family: "Roboto-fallback";
size-adjust: 100.06%;
src: local("Arial");
}
Чтобы создать полностью кроссплатформенную настройку, см. следующий пример, в котором представлены 2 скорректированных локальных резервных шрифта в ожидании фирменного шрифта.
@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: Локальная цель
Рассмотрим следующий фрагмент, который настраивает фирменный шрифт в соответствии с Arial:
@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;
}
Преимущество этой стратегии заключается в том, что рендеринг выполняется без каких-либо корректировок, а затем корректируются все входящие шрифты в соответствии с ними.
Более точная настройка с ascent-override
, descent-override
и line-gap-override
Если общего масштабирования глифов недостаточно для вашего дизайна или стратегии загрузки, вот несколько вариантов более тонкой настройки, которые работают вместе с size-adjust
. Свойства ascent-override
, descent-override
и line-gap-override
в настоящее время реализованы в Chromium 87+ и Firefox 89+.
ascent-override
Дескриптор ascent-override
определяет высоту над базовой линией шрифта.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
Красный заголовок (неотрегулированный) имеет пространство над заглавными буквами A и O, а синий заголовок был отрегулирован таким образом, чтобы его высота плотно прилегала к общей ограничивающей рамке.
descent-override
Дескриптор descent-override
определяет высоту ниже базовой линии шрифта.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
Красный заголовок (неоткорректированный) имеет пространство под базовыми линиями D и O, а синий заголовок был скорректирован так, что его буквы плотно прилегают к базовой линии.
line-gap-override
Дескриптор line-gap-override
определяет показатель межстрочного разрыва для шрифта. Это шрифт, рекомендуемый для межстрочного разрыва или внешнего интерлиньяжа.
@font-face {
font-family: "Line Gap Adjusted Arial";
src: local(Arial);
line-gap-override: 50%;
}
Красный заголовок (неотрегулированный) не имеет line-gap-override
, по сути, он равен 0%
, тогда как синий заголовок был скорректирован на 50%, создавая пространство над и под буквами соответственно.
Собираем все это вместе
Каждое из этих переопределений предлагает дополнительный способ обрезать лишнее в ограничивающей рамке безопасного текста в Интернете. Вы можете настроить текстовое поле для точного представления.
Заключение
Функция CSS @font-face
size-adjust
— это замечательный способ настроить ограничивающую рамку текста ваших веб-макетов, чтобы улучшить процесс замены шрифтов и избежать смещения макета для ваших пользователей. Чтобы узнать больше, посетите эти ресурсы:
- Спецификация CSS-шрифтов уровня 5
- Регулировка размера на MDN
- Генератор плавной замены @font-face
- Совокупное изменение макета (CLS) на web.dev
- Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS
Фото Кристиана Стрэнда на Unsplash