Кроме размеров и стилей, шрифты также могут иметь варианты. CSS предлагает способ реализации одного очень распространенного варианта. Что касается свойства font-variant, у него только два ненаследуемых значения: применяемое по умолчанию normal, которое описывает обычный текст, и small-caps (капители, или малые прописные). Для тех, кто незнаком с этим эффектом: ЭТО ВЫГЛЯДИТ ПРИМЕРНО ТАК.
Вместо прописных и строчных букв в капители прописные буквы имеют разный размер. Таким образом, можно увидеть примерно следующее:
h1 {font-variant: small-caps;}
h1 code, p {font-variant: normal;}
<h1>The Uses of <code>font-variant</code> On the Web</h1>
<p>
The property <code>font-variant</code> is very interesting...
</p>
Как можно было заметить, в представлении элемента h1 место прописных букв исходного текста занимают большие прописные буквы, а строчные буквы исходного текста замещаются маленькими прописными буквами. Это очень похоже на text-transform: uppercase, единственное реальное отличие в том, что здесь прописные буквы имеют разные размеры. Однако small-caps объявляется с помощью свойства шрифта потому, что некоторые шрифты имеют особую гарнитуру капители, которая определяется свойством font.
Что происходит, если такой гарнитуры нет? В спецификации предлагается два варианта. Первый – агент пользователя создает гарнитуру капители путем масштабирования прописных букв. Второй – все буквы приводятся к верхнему регистру и одному размеру, точно как если бы использовалось объявление text-transform: uppercase;. Конечно, это не идеальное решение, но оно допускается. В Internet Explorer для Windows до версии 6 применялся вариант перевода всех букв в верхний регистр. Остальные броузеры в большинстве своем отображают текст, набранный капителью.