font-size-adjust¶

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

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

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

Синтаксис¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* Use the specified font size */
font-size-adjust: none;

/* Use a font size that makes lowercase
   letters half the specified font size */
font-size-adjust: 0.5;

/* Two values - added in the Level 5 spec */
font-size-adjust: ex-height 0.5;

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

Значения¶

Значение по-умолчанию: none

none

размер шрифта, основанный только на свойстве font-size.

<number>

задает отношение размера строчных букв к размеру шрифта.

Применяется к: ко всем элементам, включая ::first-letter и ::first-line.

Поддержка браузерами¶

Can I Use font-size-adjust? Data on support for the font-size-adjust feature across the major browsers from caniuse.com.

Пример¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<p>CSS Examples: font-size-adjust</p>
<br />
<div class="times">
  This is the Times font (10px) which is hard to read in
  small sizes
</div>
<p></p>
<div class="verdana">
  This is the Verdana font (10px) which does much better,
  since it is a sans - serif font.
</div>
<br />
<p>Now we 'll do an adjustment:</p>
<p></p>
<div class="adjtimes">
  and the 10px Times, adjusted to the same aspect ratio as
  the Verdana. Cool, eh?
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.times {
  font-family: Times, serif;
  font-size: 10px;
}
.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}
.adjtimes {
  font-family: Times, sans-serif;
  font-size-adjust: 0.58;
  font-size: 10px;
}

Комментарии