CSS свойство font-variant-caps

Свойство font-variant-caps дает возможность выбрать альтернативные глифы для small, petite и titling капителей. Свойство имеет следующие значения:

  • normal
  • small-caps
  • all-small-caps
  • petite-caps
  • all-petite-caps
  • unicase
  • titling-caps
Значение по умолчанию normal
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Да
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.fontVariantCaps = "petite-caps";

Синтаксис

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа </title>
    <style>
      .all-small-caps {
      font-variant-caps: all-small-caps;
      font-style: italic;
      }
      .small-caps {
      font-variant-caps: small-caps;
      font-style: italic;
      }
      .normal {
      font-variant-caps: normal;
      font-style: italic;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства font-variant-caps</h2>
    <p class="all-small-caps">
      Свойство font-variant-caps контролирует использование альтернативных глифов для букв в верхнем регистре.
    </p>
    <p class="small-caps">Small caps!</p>
    <p class="normal">Normal caps!</p>
  </body>
</html>

Значения

Значение Описание
normal Деактивирует использование альтернативных глифов.
small-caps Отображает маленькие капители. Small-caps глифы используют форму заглавных букв, но уменьшаются до размеров строчных букв.
all-small-caps Отображает маленькие капители для заглавных и строчных букв.
petite-caps Отображает petite капители.
all-petite-caps Отображает petite капители для заглавных и строчных букв.
unicase Отображает смесь маленьких капителей для заглавных букв с обычными строчными буквами.
titling-caps Отображает titling капители.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
52.0+ 34.0+ 9.1+ 39.0+

Практикуйте свои знания

What is the purpose of the CSS property 'font-variant-caps'?
Считаете ли это полезным?