CSS size-adjust для @font-face

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

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

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

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

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

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

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

@font-face { font-family: "Adjusted Typeface"; size-adjust: 150%; src: url(some/path/to/typeface.woff2) format('woff2');
}

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

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

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

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

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

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

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

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

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

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

В начале этого поста проблема с размером шрифта была исправлена методом проб и ошибок. size-adjust увеличивался в исходном коде до тех пор, пока тот же заголовок в Arial не отображал те же 64 пикселя, что и 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: Удаленная цель

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

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

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

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

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

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

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

@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: Локальная цель

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

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

ascent-override

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

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

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

descent-override

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

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

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

line-gap-override

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

@font-face { font-family: "Line Gap Adjusted Arial"; src: local(Arial); line-gap-override: 50%;
}

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

Объединим все вместе

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

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

Заключение

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

Автор: Adam Argyle

Источник: web.dev

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен