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

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

Adam Argyle

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

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

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

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

• 92
• 92
• 92
• 17

Источник

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

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

Ключевой термин: семейство шрифтов и гарнитура: гарнитура обозначается по названию семейства плюс начертание шрифта. Helvetica Bold относится к конкретному жирному шрифту, тогда как Helvetica в целом относится ко всему семейству шрифтов 8+ (обычный, жирный, курсив и т. д.). С помощью 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 с помощью плавной замены шрифтов

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

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

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

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

Поместив 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");
}

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

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

Фото Кристиана Стрэнда на Unsplash