font-variantСвойство позволяет изменить целевой текст капители. Это свойство было расширено в CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )До CSS3 это свойство принимало одно из двух возможных значений: normal(способ отображения текста по умолчанию) и small-caps.
Значение small-capsбудет отображать текст заглавными буквами, которые меньше обычных заглавных букв. Это не отменяет верхний регистр, установленный в содержимом внутри разметки. Например:
В приведенной выше демонстрации для обоих абзацев установлено значение font-variant: small-caps. Первый абзац в разметке содержит только первую заглавную букву, поэтому он выглядит так, как ожидалось (первая буква в верхнем регистре, остаток в маленьком прописном).
Вторая строка пишется в разметке заглавными буквами, что отменяет small-capsзначение, устанавливая все в обычном верхнем регистре.
В дальнейшем, если для этих абзацев заданы значения font-variant: small-capsи text-transform: lowercase, они будут отображаться полностью заглавными буквами. Точно так же, если для этих абзацев установлено значение font-variant: small-capsи text-transform: uppercase, они будут отображаться в обычном верхнем регистре.
font-variantмогут быть включены как часть fontсокращенного объявления.
Новые дополнения в CSS3
В CSS3, font-variantстановится обобщающим и может принимать несколько значений, в том числе all-small-caps, petite-caps, all-petite-caps, titling-caps, и unicase, среди прочих.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | Работает | Работает | Работает | Работает | Работает | Работает |
Новые значения, добавленные в CSS3, не поддерживаются браузером, поэтому в таблице выше представлена поддержка значения small-caps.
В IE6 / 7 установка font-variant: small-capsприведет к тому, что любой текст, установленный на text-transform: uppercaseили text-transform: lowercaseбудет выглядеть как text-transform: none.