Содержание

font-variant-caps ⚡️ HTML и CSS с примерами кода

Свойство font-variant-caps управляет использованием альтернативных глифов для заглавных букв.

Когда данный шрифт включает глифы заглавных букв нескольких разных размеров, это свойство выбирает наиболее подходящие. Если миниатюрные прописные глифы недоступны, они отображаются с использованием маленьких заглавных глифов. Если их нет, браузер синтезирует их из глифов верхнего регистра.

Шрифты иногда включают специальные глифы для различных букв без регистра (например, знаков препинания), чтобы лучше соответствовать заглавным буквам вокруг них. Однако глифы с маленькой заглавной буквы никогда не синтезируются для букв без регистра.

Демо

Шрифт и Цвет
  • @font-face
  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings
  • font-weight
  • line-height
  • color
  • opacity
  • print-color-adjust

Синтаксис

/* Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

Значения

Свойство font-variant-caps указывается с использованием единственного значения ключевого слова из списка ниже. В каждом случае, если шрифт не поддерживает значение OpenType, он синтезирует глифы.

normal
Отключает использование альтернативных символов.
small-caps
Включает отображение строчных заглавных букв (функция OpenType: smcp). Глифы с маленькими заглавными буквами обычно используют форму прописных букв, но уменьшаются до размера строчных букв.
all-small-caps
Включает отображение прописных букв как для прописных, так и для строчных букв (возможности OpenType:
c2sc
, smcp).
petite-caps
Включает отображение маленьких заглавных букв (функция OpenType: pcap).
all-petite-caps
Позволяет отображать маленькие заглавные буквы как для прописных, так и для строчных букв (функции OpenType: c2pc, pcap).
unicase
Включает отображение смеси строчных прописных букв с обычными строчными буквами (функция OpenType: unic).
titling-caps
Включает отображение заглавных букв (функция OpenType: title). Глифы прописных букв часто предназначены для использования со строчными буквами. При использовании во всех последовательностях заголовков в верхнем регистре они могут казаться слишком сильными. Заглавные буквы созданы специально для этой ситуации.

Определение

Начальное значениеnormal
Применяется ковсем элементам, включая ::first-letter и ::first-line.
Наследуетсяда
Вычисленное значениекак определено
Тип анимациидискретный

Поддержка браузерами

Примеры

Пример 1

Пример 2

HTMLCSSРезультат

<p>Firefox rocks, small caps!</p>
<p>Firefox rocks, normal caps!</p>
. small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

Firefox rocks, small caps!

Firefox rocks, normal caps!

Ссылки

  • Свойство font-variant-caps MDN (рус.)
  • CSS Fonts Module Level 3

Ознакомиться с шрифтами для нанесения надписей на памятники

+7 495 940-99-81