CSS-свойство `font-variant-caps`

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

Попробуйте

font-variant-caps: normal;

font-variant-caps: small-caps;

font-variant-caps: all-small-caps;

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

Синтаксис

/* 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: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;

Значения

Свойству задаётся одно из следующих ключевых слов:

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: titl). Глифы прописных букв часто предназначены для использования вместе со строчными буквами. В последовательностях, набранных полностью прописными буквами, они могут выглядеть слишком выразительно. Титульные прописные буквы разработаны специально для таких случаев.

Описание

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

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

Значение — это одно ключевое слово. Если шрифт не поддерживает значение OpenType для заданного ключевого слова, браузер синтезирует глифы. Иногда шрифты включают специальные глифы для различных символов без регистра (например, знаков пунктуации), чтобы они лучше сочетались с окружающими прописными буквами. Однако глифы строчных заглавных букв никогда не синтезируются для символов без регистра.

Правила, зависящие от языка

Это свойство учитывает правила изменения регистра, зависящие от языка. Например:

• В тюркских языках, таких как турецкий (tr), азербайджанский (az), крымскотатарский (crh), татарский (tt) и башкирский (ba), есть два вида i (с точкой и без неё) и две пары символов в разных регистрах: i/İ и ı/I.
• В немецком языке (de) ß при преобразовании в верхний регистр может стать ẞ (U+1E9E).
• В греческом языке (el) у гласных пропадает ударение, если всё слово написано прописными буквами (ά/Α), кроме разделительной эта (ή/Ή). Кроме того, в дифтонгах с ударением на первой гласной ударение пропадает, а над второй гласной появляется диакритический знак (άι/ΑΪ).

Доступность

Большие фрагменты текста, набранные со значением all-small-caps или all-petite-caps свойства font-variant, могут быть трудны для чтения людям с когнитивными особенностями, например с дислексией.

• MDN: пояснения к руководству WCAG, пункт 1.4
• W3C: понимание WCAG 2.2

Формальное определение

Формальный синтаксис

font-variant-caps = 
  normal |
  small-caps |
  all-small-caps |
  petite-caps |
  all-petite-caps |
  unicase |
  titling-caps

Примеры

Настройка варианта шрифта со строчными заглавными буквами

HTML

<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>

CSS

.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• font-variant
• font-variant-alternates
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position