font-size-adjust

Свойство font-size-adjust принимает в качестве значения ключевое слово none, одно (<number> или from-font) или два (<font-metric> и либо <number> или from-font) значения.

none

Для значения резервного шрифта font-size корректировка не применяется.

<font-metric> Необязательно

Указывает метрику предпочтительного шрифта для корректировки размера шрифта резервного шрифта. Этот параметр принимает одно из следующих ключевых слов. Это необязательный параметр, и ex-height используется, если <font-metric> не указано.

ex-height

Использует отношение высоты x-высоты (высота строчной буквы «x» в шрифте) к размеру шрифта (значение аспекта) для корректировки размера резервного шрифта. Это ключевое значение используется для нормализации строчных букв в различных шрифтах.

cap-height

Использует отношение высоты прописных букв (высота заглавных букв) к размеру шрифта для корректировки размера резервного шрифта. Это ключевое значение используется для нормализации заглавных букв в различных шрифтах.

ch-width

Использует отношение ширины шага (горизонтальное пространство, занимаемое символом в шрифте) символа «0» (НОЛЬ, U+0030) к размеру шрифта. Это ключевое значение используется для нормализации горизонтального узкого наклона шрифтов.

ic-width

Использует отношение ширины шага символа «水» (иероглиф «вода» в CJK, U+6C34) к размеру шрифта. Это ключевое значение используется для нормализации горизонтального широкого наклона шрифтов, особенно тех, которые включают символы CJK (китайские, японские, корейские).

ic-height

Использует отношение высоты шага (вертикальное пространство, занимаемое символом в шрифте) символа «水» (иероглиф «вода» в CJK, U+6C34) к размеру шрифта. Это ключевое значение используется для нормализации вертикального широкого наклона шрифтов, особенно тех, которые включают символы CJK.

<number>

Корректирует размер используемого шрифта в зависимости от указанного <font-metric>. Когда <font-metric> не указан (в этом случае используется значение по умолчанию ex-height), значение <number> корректирует размер шрифта резервного шрифта таким образом, чтобы его x-высота была указанным кратным размеру шрифта. Это значение обычно должно совпадать со значением аспекта (отношение x-высоты к размеру шрифта) основного шрифта. Это означает, что основной шрифт, когда он доступен, будет отображаться согласованно во всех браузерах, независимо от их поддержки font-size-adjust.

Когда указано значение <font-metric> , значение <number> корректирует размер шрифта согласно выбранной <font-metric> , чтобы сохранить согласованный вид указанной метрики шрифта в различных шрифтах.

Значение <number> принимает любое число от 0 до бесконечности. 0 даёт текст нулевой высоты (то есть текст скрыт). Отрицательные значения недопустимы.

from-font

Использует значение <number> для указанного <font-metric> из доступного шрифта.

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

Корректированный размер шрифта вычисляется по формуле u = ( m / m′ ) s, где:

• m — отношение указанной <font-metric> к размеру основного шрифта.

• m′ — отношение соответствующей <font-metric> к размеру резервного шрифта.

• s — значение свойства font-size.

• u — новый, скорректированный размер шрифта для резервного шрифта.

Рассмотрим этот пример, чтобы увидеть, как вычисляется скорректированный размер шрифта. Предпочтительный шрифт имеет значение font-size 12px (s), а отношение cap-height к размеру шрифта равно 0.20 (m). Отношение cap-height к размеру шрифта в резервном шрифте составляет 0.15 (m′). Значение font-size-adjust задано как cap-height 0.20. Если основной шрифт недоступен, скорректированный размер шрифта резервного шрифта будет вычислен как 16px ((0.20 / 0.15) * 12). Это обеспечит, что cap-height резервного шрифта будет похож на cap-height основного шрифта при отображении.

font-size-adjust = 
  none            |
  <number [0,∞]>  

Этот пример демонстрирует, как свойство font-size-adjust может быть использовано для сохранения одинакового значения аспекта в разных шрифтах. Шрифт Verdana имеет относительно высокое значение аспекта 0.545, что означает, что строчные буквы относительно высокие по сравнению с заглавными. Это делает текст в небольших размерах шрифтов удобочитаемым. Однако шрифт Times имеет более низкое значение аспекта 0.447, поэтому текст менее удобочитаем при небольших размерах. Если Verdana является предпочтительным шрифтом, а Times — резервным, указание свойства font-size-adjust может помочь сохранить одинаковое значение аспекта в Times. Таким образом, если шрифт переходит на Times, текст будет сохранять примерно такой же уровень удобочитаемости, как и с Verdana.

Аналогично, отношение высоты прописных букв к размеру шрифта в Verdana равно 0.73, а в Times — 0.66. Когда к Times применяется свойство font-size-adjust, чтобы скорректировать высоту его заглавных букв для соответствия отношению в Verdana, шрифт Times отображается в скорректированном размере шрифта ((0.73 / 0.66) * 14) 15.48px.

<p class="verdana">
  A: This text uses the Verdana font (14px), which has relatively large
  lowercase letters.
</p>
<p class="times">
  B: This text uses the Times font (14px), which is hard to read in small sizes.
</p>
<p class="times adj-times-ex-height">
  C: This text in 14px Times font is adjusted to the same aspect value as the
  Verdana font, so lowercase letters are normalized across the two fonts.
</p>
<p class="times adj-times-cap-height">
  D: This text in 14px Times font is adjusted to the same cap-height to font
  size ratio as the Verdana font, so uppercase letters are normalized across the
  two fonts.
</p>

.times {
  font-family: Times, serif;
  font-size: 14px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 14px;
}

.adj-times-ex-height {
  font-size-adjust: 0.545;
}

.adj-times-cap-height {
  font-size-adjust: cap-height 0.73;
}

Без font-size-adjust в B, переход от шрифта Verdana к шрифту Times может привести к заметному снижению удобочитаемости из-за его меньшего значения аспекта. В C, обратите внимание, что для свойства font-size-adjust указано только одно значение, поэтому используется значение по умолчанию <font-metric> ex-height. D показывает, как шрифт выглядел бы по сравнению с A , если бы высота его прописных букв была скорректирована.

Для данного шрифта одинаковое содержимое в двух расположенных рядом элементах <span> может использоваться для определения значения аспекта шрифта. Если для содержимого в обоих элементах span используется один и тот же размер шрифта, элементы span будут совпадать, когда значение font-size-adjust в одном из элементов span является точным для данного шрифта.

В примере ниже представлены три пары расположенных рядом элементов <span> , каждый из которых содержит букву "b". Цель заключается в корректировке свойства font-size-adjust для правого элемента <span> в каждой паре до тех пор, пока границы вокруг двух букв не выровняются. Полученное значение font-size-adjust может рассматриваться как значение аспекта для шрифта.

Начиная с 0.6 в первой паре и корректируя до 0.5 во второй, мы продолжаем изменять значение свойства font-size-adjust до тех пор, пока границы вокруг букв "b" не выровняются идеально в третьей паре. В этом примере значение аспекта определяется как 0.482.

<div>
  <p><span>b</span><span class="adjust1">b</span></p>
  0.6
</div>

<div>
  <p><span>b</span><span class="adjust2">b</span></p>
  0.5
</div>

<div>
  <p><span>b</span><span class="adjust3">b</span></p>
  0.482
</div>

body {
  display: flex;
}

div {
  text-align: center;
}

p {
  font-family: Futura;
  font-size: 50px;
}

span {
  border: solid 1px red;
}

.adjust1 {
  font-size-adjust: 0.6;
}

.adjust2 {
  font-size-adjust: 0.5;
}

.adjust3 {
  font-size-adjust: 0.482;
}

• font-size
• font-weight
• size-adjust @font-face параметр
• Основы стилизации текста и шрифтов