Свойство CSS font-variant
Свойство CSS font-variant позволяет отображать текст обычным шрифтом или капителью. Примеры использования font-variant!
Свойство CSS font-variant управляет использованием альтернативных глифов шрифта — чаще всего капители (small caps). Капитель отображает строчные буквы как прописные, нарисованные примерно в высоту исходных строчных букв, придавая заголовкам, аббревиатурам и акронимам утончённый, равномерный вид без ощущения «крика» прописными буквами.
В классическом варианте (CSS 1) font-variant принимает одно из двух значений: normal (по умолчанию) или small-caps. При small-caps строчные буквы преобразуются в прописные глифы, отображаемые немного меньше обычных прописных букв, тогда как буквы, изначально бывшие прописными, сохраняют свой нормальный размер.
Когда использовать
font-variant: small-caps полезен, когда нужно выделение, воспринимающееся как изящное, а не громкое:
- Акронимы и аббревиатуры в основном тексте (например, «html», «css»), чтобы они не доминировали в строке полноразмерными прописными буквами.
- Стилизация буквицы или первой строки в начале статьи, часто в сочетании с ::first-line.
- Заголовки, подписи авторов и подрисуночные подписи в редакционных и печатных макетах.
Поскольку значение наследуется, его установка на контейнере применяется ко всему дочернему тексту, если только дочерний элемент не переопределяет его.
Свойство font-variant можно также задать в составе сокращённого объявления font вместе со свойствами font-style, font-weight, font-size и font-family.
В CSS Fonts Module Level 4 свойство font-variant стало сокращением для семейства полных свойств: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures и font-variant-east-asian. Это позволяет ему принимать гораздо больше значений (таких как all-small-caps, petite-caps, oldstyle-nums и slashed-zero). Классические значения normal и small-caps по-прежнему работают везде; поддержка новых значений зависит как от браузера, так и от того, содержит ли выбранный шрифт соответствующие глифы.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS1 |
| DOM Syntax | object.style.fontVariant = "normal"; <br>(Примечание: fontVariant — это имя свойства JavaScript в camelCase для font-variant.) |
Синтаксис
Синтаксис свойства CSS font-variant
font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;Пример свойства font-variant:
Пример свойства CSS font-variant со значением small-caps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">However, this text uses small-caps.</p>
</body>
</html>Результат
Второй пример: all-small-caps
Значение all-small-caps (из сокращения Level 4) отображает каждую букву как капитель, включая те, которые уже были прописными — удобно для заголовков, где нужен единообразный вид капители.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.small {
font-variant: small-caps;
}
.all {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<p class="small">The Quick Brown Fox</p>
<p class="all">The Quick Brown Fox</p>
</body>
</html>При small-caps прописные буквы в словах «The», «Quick», «Brown» и «Fox» сохраняют полную высоту; при all-small-caps они тоже уменьшаются до высоты капители.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| normal | Символы текста отображаются обычным образом. Это значение по умолчанию. | Попробовать » |
| small-caps | Преобразует строчные буквы в прописные глифы меньшего размера; существующие прописные буквы сохраняют полный размер. | Попробовать » |
| all-small-caps | Преобразует как строчные, так и прописные буквы в капитель (Level 4). | Попробовать » |
| petite-caps | Как small-caps, но с использованием глифов petite-caps, если шрифт их предоставляет (Level 4). | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию (normal). | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
- font — сокращение, которое может включать
font-variant. - font-style — обычный, курсивный или наклонный текст.
- font-weight — жирность текста.
- text-transform — принудительное преобразование в
uppercase/lowercase/capitalize(изменяет сами символы, в отличие от small-caps, который меняет только форму глифов). - letter-spacing — хорошо сочетается с капителью для улучшения читаемости акронимов.