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

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

Адам Аргайл

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

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

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

Поддержка браузера

  • Хром: 92.
  • Край: 92.
  • Фаерфокс: 92.
  • Сафари: 17.

Источник

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

  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 с помощью плавной замены шрифтов

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

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

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

больше контента означает больше потенциальных изменений макета при смене шрифтов

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

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

Калькулятор 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

Поддержка браузера

  • Хром: 87.
  • Край: 87.
  • Фаерфокс: 89.
  • Сафари: не поддерживается.

Источник

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

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

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

descent-override

Поддержка браузера

  • Хром: 87.
  • Край: 87.
  • Фаерфокс: 89.
  • Сафари: не поддерживается.

Источник

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

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

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

line-gap-override

Поддержка браузера

  • Хром: 87.
  • Край: 87.
  • Фаерфокс: 89.
  • Сафари: не поддерживается.

Источник

Дескриптор 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