18.10.2021

CSS size-adjust для @font-face

CSS size-adjust для @font-face

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

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

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

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

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

Разница результатов в высоте.

Смещение зрительно раздражающего контента.

Перемещение интерактивных мотивированных областей (раскрывающийся список прыгает!).

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

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

CSS

Создаем пользовательский шрифт с именованием «Adjusted Typeface».

Использоуем регулировку размера для роста каждого глифа до 150% от их размера по умолчанию.

Влияем только на один импортированный шрифт.

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

CSS

Предупреждение: Если 2-ой заголовок в приведенной выше демонстрации не больше первого, ваш браузер не поддерживает регулировку размера.

Устранение заморочек с CLS с помощью бесшовной подмены шрифтов

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

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

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

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

Помещая size-adjust в правило @font-face, устанавливаем глобальную настройку глифа для начертания шрифта. Верный выбор времени приведет к минимальным зрительным изменениям и беспрепятственному обмену. Чтобы сделать плавный обмен, отрегулируйте вручную или попытайтесь этот калькулятор регулировки размера от Malte Ubl.

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

В начале этого поста неувязка с размером шрифта была исправлена способом проб и ошибок. size-adjust увеличивался в начальном коде до тех пор, пока тот же заголовок в Arial не показывал те же 64 пикселя, что и Press Start 2P. Я выровнял два шрифта по мотивированному размеру шрифта.

CSS

Калибровка шрифтов

Вы, как создатель, определяете цель (и) калибровки для нормализации шкалы шрифтов. Вы сможете нормализовать шрифт Times, Arial или системный шрифт, а потом настроить пользовательские шрифты для соответствия. Либо вы можете настроить локальные шрифты в согласовании с тем, что вы загружаете. Стратегии калибровки size-adjust:

Удаленная цель: настроить локальные шрифты в согласовании с загруженными шрифтами.

Локальная цель: адаптировать загруженные шрифты к локальным мотивированным шрифтам.

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

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

CSS

В этом примере локальный шрифт Arial корректируется в ожидании загруженного пользовательского шрифта для плавной подмены.

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

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

CSS

Предупреждение: порядок семейства шрифтов имеет решающее значение. Удостоверьтесь, что шрифт, который вам нужен больше всего, является первым. Не считая того, локальный (Arial) может быть доступен не на всех устройствах вашего юзера, поэтому важно предоставить несколько резервных вариантов в семействе шрифтов.

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

CSS

Пример 2: Локальная цель

Разглядим следующий фрагмент, который настраивает шрифт Brand для соответствия Arial:

CSS

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

Более узкая настройка с ascent-override, descent-override и line-gap-override

Если общего масштабирования глифов недостаточно для опции вашего дизайна или стратегии загрузки, вот несколько более тонких характеристик настройки, которые работают вместе с настройкой размера. Характеристики ascent-override, descent-override и line-gap-override в текущее время реализованы в Chromium 87 и Firefox 89.

CSS size-adjust для @font-face

ascent-override

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

CSS

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

descent-override

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

CSS

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

line-gap-override

Дескриптор line-gap-override определяет метрику межстрочного промежутка для шрифта.

CSS

Красноватый заголовок (нескорректированный) не имеет переопределения межстрочного промежутка, по сущности, он равен 0%, в то время как голубий заголовок был скорректирован на 50%, создавая место над и под буквами соответственно.

Объединим все вкупе

Каждое из этих переопределений предлагает дополнительный метод безопасно обрезать лишнее из ограничивающего поля текста. Вы сможете настроить текстовое поле для точного представления.

Предупреждение. Если какая-либо из перечисленных выше демонстраций не показывает различий, то ваш браузер не поддерживает переопределения.

Заключение

Функции CSS @font-face и size-adjust — захватывающий метод настроить ограничивающую рамку текста ваших веб-макетов, чтоб улучшить процесс замены шрифтов, что позволяет избежать сдвига макета.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *