Свойство CSS `font-size-adjust`

Свойство font-size-adjust CSS изменяет размер шрифта, чтобы он соответствовал выбранной метрике шрифта, например высоте строчных букв, в заданной пропорции к font-size. Это свойство предназначено для настройки резервных шрифтов таким образом, чтобы их метрики были похожи на метрики основного шрифта.

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

Синтаксис

/* Keyword */
font-size-adjust: none;

/* One value: <number> or from-font */
font-size-adjust: 0.5;
font-size-adjust: from-font;

/* Two values */
font-size-adjust: ex-height 0.5;
font-size-adjust: ch-width from-font;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
font-size-adjust: revert-layer;
font-size-adjust: unset;

Значения

Для этого свойства указывается ключевое слово none, одно (<number> или from-font) либо два (<font-metric> и <number> или from-font) значения.

none

Корректировка размера шрифта не применяется.

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

Определяет метрику шрифта, используемую для корректировки его размера. По умолчанию используется ex-height. В качестве параметра указывается одно из следующих ключевых слов:

ex-height

Для корректировки размера шрифта используется отношение высоты строчной буквы «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>, значение <number> корректирует размер шрифта согласно выбранному значению <font-metric>, чтобы сохранить одинаковый вид заданной метрики шрифта в разных шрифтах.

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

from-font

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

Описание

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

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

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

• m — целевое соотношение, заданное с помощью <number> или полученное с помощью from-font.
• m′ — отношение выбранной метрики к размеру шрифта в корректируемом шрифте.
• 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 резервного шрифта с основным при отображении.

Формальное определение

Формальный синтаксис

font-size-adjust = 
  none |
  [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number> ]

Примеры

Нормализация размера шрифта по строчным и прописным буквам

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

Аналогично, отношение высоты прописных букв к размеру шрифта в Verdana составляет 0.73, а в Times — 0.66. Если применить свойство font-size-adjust к Times, чтобы привести высоту его прописных букв к соотношению в 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> можно использовать, чтобы определить значение соотношения сторон шрифта. Если для содержимого обоих элементов задать одинаковый размер шрифта, элементы будут совпадать, когда значение font-size-adjust в одном из них точно соответствует данному шрифту.

В примере ниже показаны три пары расположенных рядом элементов <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 {
  margin: 0 30px 10px 30px;
}

body {
  display: flex;
}

div {
  text-align: center;
}

p {
  font-family: "Futura", sans-serif;
  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 дескриптор
• Атрибут SVG font-size-adjust
• Изучите основы стилизации текста и шрифтов