Настройка размера CSS для @font-face

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

Адам Аргил

Рассмотрим следующий пример , где font-size составляет 64px , и единственное различие между этими заголовками заключается в font-family . Примеры слева не были скорректированы и имеют непостоянный конечный размер. Примеры справа используют size-adjust , чтобы гарантировать, что 64px являются постоянным конечным размером.

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

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

Browser Support

  • Chrome: 92.
  • Край: 92.
  • Firefox: 92.
  • Сафари: 17.

Source

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

  1. Разница в росте в результатах.
  2. Резкие визуальные переходы между контентными элементами.
  3. Интерактивные целевые области, перемещающиеся в выпадающем списке (он скачет туда-сюда!).

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

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

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. Создает пользовательский шрифт с именем Adjusted Typeface .
  2. Использует size-adjust для увеличения размера каждого глифа до 150% от его стандартного размера.
  3. Это влияет только на единственный импортированный шрифт.

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

h1 {
  font-family: "Adjusted Typeface";
}

Снижение уровня CLS за счет бесшовной замены шрифтов.

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

В примере слева есть функция смещения макета, в примере справа — нет.

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

Чем больше контента, тем больше потенциальных изменений в расположении элементов при смене шрифтов.

Добавление size-adjust в правило @font-face устанавливает глобальную корректировку глифа для шрифта. Правильное использование этого параметра приведет к минимальным визуальным изменениям и плавной замене. Для создания плавной замены можно выполнить корректировку вручную или воспользоваться калькулятором size-adjust от Мальте Убла .

Выберите веб-шрифт Google и получите предварительно настроенный фрагмент кода @font-face .

В начале этого поста проблема с размером шрифта решалась методом проб и ошибок. 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. Удалённая цель:
    Скорректируйте локальные шрифты, используя загруженные шрифты.
  2. Локальная цель:
    Настройте загруженные шрифты в соответствии с локальными целевыми шрифтами.

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

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

@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 Fonts, и он рассчитает, как адаптировать Arial для плавной замены. Вот пример CSS для Roboto из калькулятора , где загружен шрифт 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

Browser Support

  • Chrome: 87.
  • Край: 87.
  • Firefox: 89.
  • Safari: не поддерживается.

Source

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

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

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

descent-override

Browser Support

  • Chrome: 87.
  • Край: 87.
  • Firefox: 89.
  • Safari: не поддерживается.

Source

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

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

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

line-gap-override

Browser Support

  • Chrome: 87.
  • Край: 87.
  • Firefox: 89.
  • Safari: не поддерживается.

Source

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

Фотография Кристиана Стрэнда с сайта Unsplash.