Свойство CSS font-variant-caps
В CSS1 и CSS2 свойство font-variant задавало small caps. В CSS3 оно стало сокращённой записью для нескольких свойств, включая font-variant-caps. Это свойство позволяет выбирать альтернативные глифы для строчных заглавных, уменьшенных заглавных и заглавных для заголовков. Обычно используются следующие значения:
- normal
- small-caps
- all-small-caps
- petite-caps
- all-petite-caps
- unicase
- titling-caps
Когда в данном шрифте присутствуют глифы заглавных букв разного размера, свойство font-variant-caps выбирает наиболее подходящие. Если глифы строчных заглавных букв недоступны, они отображаются с использованием обычных заглавных букв.
Фактическое отображение зависит от поддержки функций OpenType в шрифте.
| Начальное значение | normal |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.fontVariantCaps = "petite-caps"; |
Синтаксис
Синтаксис свойства CSS font-variant-caps
font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;Пример свойства font-variant-caps:
Пример использования свойства CSS font-variant-caps со значениями all-small-caps, small-caps и normal
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.all-small-caps {
font-variant-caps: all-small-caps;
}
.small-caps {
font-variant-caps: small-caps;
}
.normal {
font-variant-caps: normal;
}
</style>
</head>
<body>
<h2>Font-variant-caps property example</h2>
<p class="all-small-caps">
The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
</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 | Отображает уменьшенные заглавные буквы. |
| all-petite-caps | Отображает уменьшенные заглавные буквы как для заглавных, так и для строчных символов. |
| unicase | Отображает смесь строчных заглавных букв для заглавных символов и обычных строчных букв. |
| titling-caps | Отображает заглавные буквы для заголовков. |
Примечание: initial и inherit — это общесвойственные ключевые слова CSS, которые можно использовать с любым свойством CSS.
Совместимость с браузерами
| Браузер | Поддержка |
|---|---|
| Chrome | 48+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 9.1+ |
| Opera | 35+ |
Примечание: font-variant-caps является частью сокращённой записи font-variant. При использовании сокращённой записи явно указывайте font-variant-caps, чтобы сохранить его значение, так как другие значения сокращённой записи могут его переопределить.
Практика
В чём заключается функция свойства CSS 'font-variant-caps'?