Свойство CSS font-variant-caps
Свойство CSS font-variant-caps позволяет выбирать альтернативные глифы для малых капителей и заглавных символов. Значения и примеры.
Свойство CSS font-variant-caps управляет использованием альтернативных глифов для заглавных букв, таких как малая капитель, мелкая капитель и заглавные литеры для заголовков. В CSS1 и CSS2 они выбирались через более широкое свойство font-variant; в CSS3 font-variant стало сокращением, а font-variant-caps было выделено в отдельное самостоятельное свойство.
На этой странице рассматривается, что делает каждое значение, когда его применять, в чём разница между font-variant-caps и text-transform, а также оговорка об OpenType, которая определяет, будете ли вы видеть истинную капитель или запасной вариант.
Доступные значения:
normalsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-caps
Когда шрифт содержит глифы заглавных букв разных размеров, font-variant-caps выбирает наиболее подходящие. Если шрифт не имеет специальных глифов малой капители, браузер синтезирует их, уменьшая обычные прописные глифы — поэтому эффект всегда работает, но синтезированный результат выглядит менее отточенным, чем настоящий шрифт с капителью.
Фактическое отображение зависит от поддержки функций OpenType в шрифте.
Зачем использовать font-variant-caps
Малая капитель — это типографическое соглашение, а не просто стилистический приём. Используйте font-variant-caps, когда хотите:
- Аббревиатуры и сокращения (NASA, HTML, PDF) визуально соответствовали весу окружающего строчного текста, а не «кричали» прописными буквами в полный рост.
- Подзаголовки, подписи или первую строку статьи выделить, не меняя размер или насыщенность шрифта.
- Юридические тексты или колонтитулы, где важна равномерная «цветность» строки.
В отличие от text-transform: uppercase, font-variant-caps не изменяет исходный текст — программы чтения с экрана по-прежнему воспроизводят исходный регистр, а результат использует специально разработанные глифы, а не увеличенные прописные буквы. Используйте font-variant-caps, когда цель — типографическое оформление уже правильно набранного текста.
| Начальное значение | 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>Результат
![Свойство CSS font-variant-caps](https://api.w3docs.com/uploads/media/default/0001/03/ceee914d009da29a1afecc4c3ff8691af0fdd54b.png "CSS font-variant-caps property rendering small-caps, all-small-caps, and normal text" =420x)
font-variant-caps и text-transform
Легко перепутать font-variant-caps: small-caps с text-transform: uppercase. Они выглядят похоже, но ведут себя по-разному:
<!DOCTYPE html>
<html>
<head>
<title>small-caps vs. uppercase</title>
<style>
.smallcaps {
font-variant-caps: small-caps;
}
.upper {
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="smallcaps">The agency known as nasa.</p>
<p class="upper">The agency known as nasa.</p>
</body>
</html>В первом абзаце строчные буквы отображаются как малая капитель, при этом исходный строчный текст сохраняется (программа чтения с экрана по-прежнему произносит «nasa»). Во втором каждая буква принудительно преобразуется в прописную полной высоты, и отображаемый текст читается как «THE AGENCY KNOWN AS NASA». Используйте font-variant-caps для типографической обработки, а text-transform — когда действительно нужно изменить регистр.
Значения
| Значение | Описание |
|---|---|
| normal | Использование альтернативных глифов не активировано. |
| 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 для сохранения его значения, поскольку другие значения сокращения могут его переопределить.
Связанные свойства
font-variant-caps — одно из нескольких полных свойств, которыми управляет сокращённое font-variant. Родственные свойства позволяют точно настроить другие функции OpenType:
font-variant-ligatures— управление обычными, произвольными и историческими лигатурами.font-variant-numeric— выбор между старой и новой стилистикой цифр, дробями и порядковыми числительными.font-variant-alternates— выбор стилистических и символьных альтернатив, предоставляемых шрифтом.font-feature-settings— низкоуровневый способ управления любой функцией OpenType по её четырёхсимвольному тегу.text-transform— изменение фактического регистра букв в тексте.