font-variant-caps

Свойство font-variant-caps применяется для управления начертанием заглавных букв в тексте. Обычно используется в заголовках для создания капители, когда все буквы приобретают вид заглавных (рис. 1).

Вид капители

Рис. 1. Вид капители

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | 
  all-petite-caps | unicase | titling-caps
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

normal
Обычный текст без изменений.
small-caps
Все буквы отображаются в верхнем регистре, но размер прописных букв соответствует размеру строчных.
all-small-caps
Все буквы отображаются в верхнем регистре одинакового размера.
petite-caps
Все буквы отображаются прописными, но размер прописных букв немного меньше обычного.
all-petite-caps
Все буквы прописные уменьшенного размера.
unicase
Все буквы отображаются в верхнем регистре, но размер прописных букв соответствует строчным.
titling-caps
Первая буква каждого слова прописная, остальные строчные.

Песочница

Во славу Рима!
h1 {
  font-variant-caps: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>font-variant-caps</title> <style> h1 { /* Семейство шрифта */ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-weight: normal; /* Нормальная жирность */ } .caps { font-variant-caps: petite-caps; /* Капитель */ } </style> </head> <body> <h1>Обычный заголовок</h1> <h1 class="caps">Заголовок с капителью</h1> </body> </html>

Объектная модель

Объект.style.fontVariantCaps

Спецификация

CSS Fonts Module Level 4

Браузеры

79 52 39 9.1 34
52 39 41 9.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.