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

Свойство font-variant устанавливает текст в обычном или малых прописных (small-caps) начертаниях.

Свойство font-variant может принимать два значения: normal и small-caps. normal является значением по умолчанию. При выборе small-caps для текста строчные буквы преобразуются в прописные, но эти преобразованные буквы будут отображаться немного меньше обычных прописных букв.

Свойство font-variant может быть включено в качестве части сокращённого объявления font.

INFO

Это свойство было расширено в CSS Fonts Module Level 4. В современном CSS свойство font-variant может принимать несколько дополнительных значений (например, petite-caps, all-petite-caps, all-small-caps, titling-caps). Обратите внимание, что поддержка этих современных значений браузерами может различаться.

Начальное значение	normal
Применяется к	Ко всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Да.
Анимация	Нет.
Версия	CSS1
Синтаксис DOM	object.style.fontVariant = "normal"; `<br>`(Примечание: `fontVariant` — это имя свойства JavaScript в camelCase для `font-variant`.)

Синтаксис

Синтаксис свойства CSS font-variant

css

font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;

Пример свойства font-variant:

Пример использования свойства CSS font-variant со значением small-caps

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smallcaps {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant property example</h2>
    <p>Here we used a normal text as you can see.</p>
    <p class="smallcaps">However, this text uses small-caps.</p>
  </body>
</html>

Try it Yourself »

Результат

CSS font-variant Property

Значения

Значение	Описание	Запустить
normal	Указывает, что символы текста будут обычными. Это значение по умолчанию для данного свойства.	Запустить »
small-caps	Преобразует строчные буквы в прописные, но отображает их в меньшем размере, чем обычные прописные буквы.	Запустить »
all-small-caps	Преобразует все буквы в малые прописные (small-caps).	Запустить »
titling-caps	Отображает текст в заголовочных прописных буквах, обычно используется для заголовков.	Запустить »
initial	Устанавливает свойству его значение по умолчанию.	Запустить »
inherit	Наследует значение свойства от родительского элемента.

Практика

Что делает CSS-свойство 'font-variant'?

Оно определяет базовую линию шрифта.Оно указывает, должен ли текст отображаться шрифтом в малых прописных (small-caps).Оно изменяет межбуквенный интервал.Это сокращение для 'font-variant-caps', 'font-variant-numeric', 'font-variant-alternates', 'font-variant-ligatures' и 'font-variant-east-asian'.Оно определяет высоту строки.

Свойство CSS font-variant ​

Синтаксис ​

Пример свойства font-variant: ​

Результат ​