font-size-adjust¶
Свойство font-size-adjust
указывает, что размер шрифта должен быть выбран на основе высоты строчных букв, а не высоты заглавных букв.
Это полезно, поскольку разборчивость шрифтов, особенно при небольших размерах, определяется больше размером строчных букв, чем размером заглавных букв.
Разборчивость может стать проблемой, когда первое семейство шрифтов в свойстве font-family
недоступно, а его замена имеет значительно отличающееся соотношение сторон (отношение размера строчных букв к размеру шрифта).
Шрифт и Цвет
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
Синтаксис¶
/* 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;
/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;
Значения¶
Значение по-умолчанию: none
none
- размер шрифта, основанный только на свойстве
font-size
. <number>
- задает отношение размера строчных букв к размеру шрифта.
Применяется к: ко всем элементам, включая ::first-letter
и ::first-line
.
Поддержка браузерами¶
Пример¶
<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>
.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;
}