font-size-adjust CSS

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

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

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

Свойство **`font-size-adjust`** указывает, что размер шрифта должен быть выбран на основе высоты строчных букв, а не высоты заглавных букв. Это полезно, поскольку разборчивость шрифтов, особенно при небольших размерах, определяется больше размером строчных букв, чем размером заглавных букв. Разборчивость может стать проблемой, когда первое семейство шрифтов в свойстве [`font-family`](/css/font-family/) недоступно, а его замена имеет значительно отличающееся соотношение сторон (отношение размера строчных букв к размеру шрифта).
Значение по умолчанию:

none

Значение по умолчанию:
`none`
Наследуется:
Да
Применяется:

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

Применяется:
ко всем элементам, включая [`::first-letter`](/css/pseudo-element-first-letter/) и [`::first-line`](/css/pseudo-element-first-line/).
Анимируется:
Да
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="font-size-adjust" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=font-size-adjust">Can I Use font-size-adjust?</a> Data on support for the font-size-adjust feature across the major browsers from caniuse.com. </p>

Синтаксис

/* 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;

Синтаксис

/* 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 — размер шрифта, основанный только на свойстве font-size.
  • <number> — задает отношение размера строчных букв к размеру шрифта.

Значения

* `none` -- размер шрифта, основанный только на свойстве [`font-size`](/css/font-size/). * `<number>` -- задает отношение размера строчных букв к размеру шрифта.

Примеры

HTML

<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>
<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>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

CSS

.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;
}

Результат

Результат работы свойства font-size-adjust
Результат работы свойства font-size-adjust

Примеры

HTML <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> <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> <div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div> CSS .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; } Результат ![Результат работы свойства font-size-adjust](/workspace/uploads/css/font-size-adjust.png)

Содержание

  • Синтаксис
      /* 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;
  • Значения
    • Примеры
        HTML <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> <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> <div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div> CSS .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; } Результат ![Результат работы свойства font-size-adjust](/workspace/uploads/css/font-size-adjust.png)

    В начало