Чтобы подобрать видимый размер резервного шрифта под веб-шрифт, нормализуйте их высоту строчных букв с помощью CSS font-size-adjust или масштабируйте конкретное резервное начертание с помощью size-adjust. В этом руководстве описано, как выбрать, рассчитать и проверить корректировку в браузере на Mac.

Выберите метрику, подходящую для вашего текста

Для обычного английского основного текста начните с высоты строчных букв: это высота строчных символов относительно размера шрифта. У двух шрифтов, заданных как 16px, высота строчных букв может различаться, поэтому одинаковые размеры CSS не обязательно выглядят одинаково. MDN описывает font-size-adjust именно как способ нормализовать выбранную метрику для шрифтов, используемых при отображении текста. MDN: font-size-adjust

Сначала выберите метрику, а уже потом меняйте значения. Для абзацев с большим количеством строчных букв обычно подходит ex-height; для меток, набранных заглавными буквами, может подойти cap-height. Вариант ch-width нормализует ширину символа ноль и решает иную задачу, чем выравнивание высоты строчных букв. Ни один из этих вариантов не гарантирует одинаковую ширину всех слов. MDN: значения font-size-adjust

Для этой задачи используйте тестовую страницу с заголовком, например Sample collection, меткой, например Tile 024, и абзацем, например Amber tiles sit beside a blue circle. Each tile has a short label. Цель — сделать строчный текст резервного шрифта визуально похожим по размеру, одновременно проверяя, что эти элементы по-прежнему помещаются.

Ваша задача Начните с Что проверить отдельно
Нормализовать размер строчных букв для стека шрифтов font-size-adjust с целевым коэффициентом высоты строчных букв Переносы строк и межстрочный интервал
Настроить одно известное резервное начертание Псевдонима резервного шрифта с size-adjust Доступность именно этого локального начертания
Уменьшить различия в вертикальном расположении Переопределений метрик шрифта после выравнивания размера Базовые линии и высота абзаца

У первых двух механизмов разная область действия: font-size-adjust применяется к тексту, тогда как size-adjust задаётся внутри правила @font-face и масштабирует контуры и метрики этого начертания. MDN: font-size-adjust, MDN: size-adjust

Настройте надёжное сравнение на Mac

Используйте тестовую страницу, таблицу стилей которой можно редактировать. В примерах ниже существующий веб-шрифт называется Sample Web; замените это имя его фактическим CSS-именем семейства. Это фрагменты для интеграции: предполагается, что веб-шрифт уже объявлен, а тестовые элементы существуют.

В Chrome на Mac щёлкните правой кнопкой мыши тестовый абзац и выберите Inspect. Либо нажмите Command + Option + C и выберите абзац. Chrome откроет панель Elements, где в разделе Styles отображаются применённые правила CSS. Chrome: открыть инструменты разработчика Chrome

Откройте Computed, прокрутите до раздела Rendered Fonts и проверьте, какой шрифт действительно отображает тестовый текст. Одного списка объявленных семейств недостаточно, чтобы понять, используется ли предпочтительный шрифт. В документации Chrome показано, как с помощью этого раздела отличить локальные шрифты от сетевых. Chrome: применять другие эффекты

При сравнении оставляйте неизменными размер области просмотра, масштаб, насыщенность и стиль шрифта, межбуквенный интервал и ширину контейнера. Сначала проверьте состояние с веб-шрифтом. Затем временно задайте в свойстве font-family абзаца нужный резервный шрифт, например Arial, sans-serif, и снова проверьте отображаемый шрифт.

Меняйте объявления в Styles и включайте или выключайте корректировки с помощью флажков. Так можно сравнить один и тот же абзац, не меняя его текст или расположение. Chrome: справочник по возможностям CSS

Если измеряете текст с помощью JavaScript, дождитесь загрузки нужного шрифта, а не используйте произвольную задержку. document.fonts.load() может запросить указанное начертание; document.fonts.ready разрешается после завершения загрузки шрифтов документа и связанных с ней операций компоновки. Ни один из этих способов не заменяет проверку фактически отображаемого шрифта. MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

Рассчитайте и примените целевой коэффициент высоты строчных букв

Целевое значение для числового font-size-adjust — это коэффициент, а не процент увеличения. Если метрики доступны для точного начертания, разделите высоту строчных букв веб-шрифта на количество единиц на кегль. Затем браузер подгонит каждый выбранный шрифт так, чтобы эта метрика составляла целевую долю заданного размера шрифта. W3C: модуль CSS Fonts, уровень 5

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

Метрика Целевой веб-шрифт Резервный шрифт
Единиц на кегль 1,000 1,000
Высота строчных букв в единицах шрифта 520 470
Коэффициент высоты строчных букв 0.52 0.47

При заданном размере 16px целевая высота строчных букв составляет 16 × 0.52 = 8.32px. Чтобы достичь такой высоты, резервный шрифт нужно масштабировать в 0.52 ÷ 0.47 раза, то есть примерно в 1.106383 раза. Скорректированный размер отображения составит около 17.7021px. Этот расчёт иллюстрирует формулу спецификации и не позволяет предсказать фактические переносы строк.

Для подхода со свойством задайте целевой коэффициент для текста. В этом фрагменте CSS предполагается, что у тестового абзаца есть класс sample-copy:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Здесь 0.52 относится к условному веб-шрифту. Замените его коэффициентом целевого начертания. Неточное значение изменит и отображаемый размер предпочтительного шрифта: свойство применяется ко всем выбранным шрифтам, включая веб-шрифт. W3C: модуль CSS Fonts, уровень 5

Если у вас нет надёжного коэффициента, W3C описывает способ визуальной калибровки: сравните два образца одного шрифта, размера и текста, отключив корректировку у одного и задав пробное числовое значение у другого. Начните с 0.5 и уточняйте значение, пока образцы не совпадут. Для калибровки используйте увеличенные отдельные образцы, а затем вернитесь к обычному размеру текста, чтобы оценить результат. Считайте значение, полученное визуально, приблизительным. W3C: модуль CSS Fonts, уровень 5

Ключевое слово from-font берёт целевое значение из первого доступного шрифта. Если нужный веб-шрифт недоступен, целевое значение может предоставить другой шрифт. Если резервный шрифт должен соответствовать известному веб-шрифту, даже когда тот не загружается, используйте заданный числом коэффициент. MDN: значения font-size-adjust

Используйте псевдоним резервного шрифта, чтобы управлять одним начертанием

Выберите size-adjust, если хотите привязать масштабирование к конкретному резервному начертанию. Для условной пары выше преобразуйте коэффициент масштабирования в проценты: 100 × 0.52 ÷ 0.47 = 110.6383%. Дескриптор масштабирует продвижение глифов, контуры и другие связанные метрики. MDN: size-adjust

В этом альтернативном фрагменте предполагается, что Arial Regular доступен локально, а целевой веб-шрифт уже объявлен. Значение в процентах условное, поэтому перед применением измерьте свою пару шрифтов:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

Такой синтетический псевдоним ограничивает корректировку этим стеком. Источники local() задают конкретное начертание шрифта; они не выбирают произвольный системный шрифт без засечек. Спецификация CSS Fonts рекомендует указывать полное и PostScript-имя для сопоставления на разных платформах. Если ни один источник не найден, браузер переходит к следующему семейству в списке. W3C: модуль CSS Fonts, уровень 4

Используйте этот способ вместо предыдущего. Применение font-size-adjust к тексту с начертанием, скорректированным через size-adjust, может свести масштабирование на нет, поскольку свойство использует метрику, уже изменённую переопределением. MDN: описание font-size-adjust

Отдельно проверьте переносы строк и различия базовой линии

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

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

Если базовая линия или высота блока всё ещё различаются, изучите ascent-override, descent-override и line-gap-override. Эти параметры управляют метриками компоновки, а не задают дополнительный целевой видимый размер. Например, метрика подъёма — это расстояние над базовой линией, используемое при расчёте строчных блоков. Определяйте значения переопределения по фактической паре шрифтов, а не копируйте проценты из посторонних примеров. MDN: ascent-override

Чтобы получить отправную точку, воспользуйтесь описанным в документации Capsize методом createFontStack: он принимает метрики в порядке предпочтительных семейств и возвращает fontFamily и fontFaces для резервного шрифта. Используйте оба результата вместе. В документации также описаны @capsizecss/metrics для включённых шрифтов и @capsizecss/unpack для извлечения метрик из пользовательского файла. Сгенерированные объявления всё равно нужно проверить на тестовой странице. Документация Capsize

Сохраняйте компоновку браузера и формирование текста

Измерения Canvas могут помочь сравнить строки, но отвечают на более узкие вопросы. WHATWG определяет measureText().width как ширину продвижения, тогда как фактические измерения ограничивающего прямоугольника описывают нарисованный текст. Canvas готовит гипотетическую строку с бесконечной шириной, поэтому её ширина не измеряет абзац DOM с переносами. WHATWG: стандарт HTML, Canvas

В тесте используйте целые слова и предложения. Не собирайте текст заново из символов с индивидуальным позиционированием и не считайте, что сумма ширин отдельных символов воспроизводит сформированную строку. CSS задаёт условия формирования текста на границах встроенных элементов, в том числе при изменении интервалов или выравнивания. При проверке резервного шрифта сохраняйте обычную структуру компонента. W3C: модуль CSS Text, уровень 3

Проверьте поддержку браузерами и завершите сравнение

По данным MDN, базовый font-size-adjust имеет статус Baseline 2024, а size-adjust широко поддерживается с сентября 2023 года. Это не означает, что старые браузеры поддерживают все новые метрики и ключевые слова. Сверьтесь с таблицами совместимости для используемого синтаксиса. MDN: font-size-adjust, MDN: size-adjust

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

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

Источники