Визуально стабильные смешанные шрифты

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

Свойство font-size-adjust позволяет нормализовать визуальный размер текста, корректируя размер шрифта на основе определенной метрики шрифта (обычно высоты строчных букв).

Руководство по настройке

1. ОБЯЗАТЕЛЬНО. Применяйте font-size-adjust к элементам, для которых важно единообразие шрифтов, например к контейнерам с веб-шрифтами или блокам с разными семействами шрифтов.
2. ОБЯЗАТЕЛЬНО. Используйте ключевое слово from-font для элементов, чтобы автоматически сопоставлять размер шрифта во вложенных элементах с пропорциями основного шрифта.
3. ОБЯЗАТЕЛЬНО. Используйте определенное числовое значение переопределения соотношения сторон для font-size-adjust (например, font-size-adjust: 0.5), чтобы нормализовать пропорции независимо, когда пропорции шрифта, на которых они основаны, относятся к разным темам.

Пример: автоматическая нормализация высоты строчных букв

Использование from-font – самый надежный подход. Оно извлекает соотношение сторон высоты строчных букв из первого доступного шрифта и применяет его к шрифтам в дочерних элементах.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Пример. Указание определенной высоты строчных букв

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

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Резервные стратегии

ОБЯЗАТЕЛЬНО. В браузерах, которые не поддерживают font-size-adjust, шрифты будут отображаться с естественным значением font-size. Чтобы избежать этого, необходимо предусмотреть резервный вариант для неподдерживаемых браузеров с помощью блока @supports:

• Используйте @supports not (font-size-adjust: from-font), чтобы определить, поддерживается ли font-size-adjust, и задать резервные стили (например, скорректировать высоту строки или размер шрифта).
• Выбирайте шрифты с высотой строчных букв, похожей на высоту строчных букв основного шрифта.
• Примените определенные переопределения font-size и line-height для альтернативных и вложенных семейств шрифтов.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}