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

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

Adam Argyle

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

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

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

1. Разница в высоте результатов.
2. Резкие визуальные сдвиги контента.
3. Перемещение интерактивных целевых областей (раскрывающийся список прыгает).

Ключевой термин. Семейство шрифтов и гарнитура. Гарнитура определяется названием семейства и начертанием шрифта. Helvetica Bold – это конкретный полужирный шрифт, а Helvetica – общее название семейства из восьми и более гарнитур (обычный, полужирный, курсив и т. д.). В CSS @font-face вы будете работать с гарнитурами, хотя для их использования нужно писать font-family.

Как масштабировать шрифты с помощью 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";
}

Внимание! Если второй заголовок в примере выше не больше первого, ваш браузер не поддерживает size-adjust.

Как уменьшить CLS с помощью плавной замены шрифтов

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

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

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

Чем больше контента, тем больше потенциальное смещение макета при замене шрифта.

Добавив size-adjust в правило @font-face, вы зададите глобальную корректировку глифов для шрифта. Если вы выберете правильный момент, то визуальные изменения будут минимальными, а переход – плавным. Чтобы замена была незаметной, настройте размер вручную или воспользуйтесь калькулятором от Мальте Убла (Malte Ubl).

Выберите веб-шрифт 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. Удаленная цель

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

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

Калькулятор Мальте также работает с целевой гарнитурой бренда. Выберите шрифт Google Fonts, и инструмент рассчитает, как скорректировать Arial, чтобы плавно заменить его. Вот пример CSS для шрифта Roboto из калькулятора, где загружается шрифт Arial и называется Roboto-fallback:

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

Внимание! Порядок font-family имеет критическое значение. В нем указывается порядок и приоритет. Убедитесь, что нужная вам гарнитура указана первой. Кроме того, шрифт local(Arial) может быть доступен не на всех устройствах пользователей, поэтому важно указать несколько резервных шрифтов в семействе шрифтов.

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

@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

• 87
• 87
• 89
• 

Source

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

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

В красном заголовке (неотрегулированном) есть пространство над заглавными буквами А и О, а синий заголовок был отрегулирован так, чтобы высота заглавных букв плотно прилегала к общей граничной рамке.

descent-override

Browser Support

• 87
• 87
• 89
• 

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

• 87
• 87
• 89
• 

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

• Спецификация CSS Fonts Level 5
• Size Adjust на MDN
• Генератор @font-face для плавной замены шрифтов
• Cumulative Layout Shift (CLS) на сайте web.dev
• Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов CSS