CSS font-variant-caps — small caps, капітель

Властивість font-variant-caps дозволяє вибирати альтернативні гліфи, що використовуються для маленьких літер.

font-variant-alternates є однією із властивостей у CSS3, які використовуються для ввімкнення різних функцій, пов'язаних зі шрифтом та покращення зовнішнього вигляду тексту на сторінці.У CSS1 та CSS2 невеликі шапки були вказані за допомогою властивості font-variant. У CSS3 ця властивість тепер стала доступною для деяких нових властивостей CSS3 (включаючи властивість font-variant-caps). Вона розширює використання невеликих шапок, щоб включити інші пов'язані гліфи, такі як маленькі шапки, шапки для заголовка та унікази. Таким чином, ви можете використовувати шрифт-варіант або шрифт-варіант-кепки, щоб вказати маленькі кепки та інші пов'язані гліфи.

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість font-variant-caps може отримувати 7 значень:

normal

Жодна з перерахованих нижче функцій не ввімкнена.

автор: Svitlana

правити

small-caps

Дозволяє відображати маленькі капітелі (функція OpenType: smcp). Гліфи з маленькими капітелями зазвичай використовують форму великих літер, але зводиться до розміру букв у нижньому регістрі.

автор: Svitlana

правити

all-small-caps

Дозволяє відображати маленькі капітелі для верхнього та нижнього регістрів (функції OpenType: c2sc, smcp).

автор: Svitlana

правити

petite-caps

Дозволяє відображати маленькі капітелі (функція OpenType: pcap).

автор: Svitlana

правити

all-petite-caps

Дозволяє відображати маленькі капітелі для верхнього та нижнього регістрів (функції OpenType: c2pc, pcap).

автор: Svitlana

правити

unicase

Вмикає відображення суміші малих великих літер для великих літер із звичайними малими літерами (функція OpenType: unic).

автор: Svitlana

правити

titling-caps

Дозволяє показувати заголовки капіталів (функція OpenType: title).

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	52	34	9.1	39	79	—

Підтримка: мобільні переглядачі

Переглядач
	52	52	34	9.3

Приклади

+ запропонувати свій приклад у пісочниці

<p class="normal">normal: Приклад Тексту</p>
<p class="sc">small-caps: Приклад Тексту</p>
<p class="asc">all-small-caps: Приклад Тексту</p>

.normal { font-variant-caps: normal; }
.sc     { font-variant-caps: small-caps; }
.asc    { font-variant-caps: all-small-caps; }

<p class="label">без задання</p>
<p class="ex">Каскадні таблиці стилів — CSS sample</p>

<p class="label">font-variant-caps: small-caps</p>
<p class="ex small">Каскадні таблиці стилів — CSS sample</p>

<p class="label">font-variant-caps: all-small-caps</p>
<p class="ex all">Каскадні таблиці стилів — CSS sample</p>

<p class="label">підробка: text-transform: uppercase + менший кегль</p>
<p class="ex fake">Каскадні таблиці стилів — CSS sample</p>

body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    padding: 12px;
}

.label {
    font-family: monospace;
    font-size: 12px;
    color: #666;
    margin: 16px 0 2px;
}

.ex {
    margin: 0;
}

.small {
    font-variant-caps: small-caps;
}

.all {
    font-variant-caps: all-small-caps;
}

.fake {
    text-transform: uppercase;
    font-size: 0.8em;
}

<p>Цей приклад показує як працює властивість <code>font-variant-caps</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення цифр нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>

<div class="inputs">
  <input id="normal" checked name="font-variant-caps" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Без задання.</message>
  
  <input id="all-small-caps" name="font-variant-caps" type="radio"/>
  <label for="all-small-caps">all-small-caps</label>
  <message for="all-small-caps">Дозволяє відображати маленькі капітелі для верхнього та нижнього регістрів (функції OpenType: c2sc, smcp).</message>
  
    <input id="small-caps" name="font-variant-caps" type="radio"/>
  <label for="small-caps">small-caps</label>
  <message for="small-caps">Дозволяє відображати маленькі капітелі (функція OpenType: smcp). Гліфи з маленькими капітелями зазвичай використовують форму великих літер, але зводиться до розміру букв у нижньому регістрі.</message>
</div>

<p id="message">Без задання.</p>

<hr>

<p id="block">Це приклад для демонстрації дії властивості.</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 3.5em; 
  text-align: center;
  font-variant-caps: normal;
}

message {
  display: none;
}

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-variant-caps', this.id));

}));

<p class="about">За допомогою властивості <strong>font-variant-caps</strong> ми можемо зробити так, щоб текст використовував гліфи для великих літер замість маленьких. Як тут:</p>

<p>Цей абзац використовує значення властивості <strong>font-variant-caps</strong> за замовчуванням (<em>normal</em>).</p>

<p class="change">А тут ми встановили значення <em>all-small-caps</em>.</p>

body {
  line-height: 1.45;
  font-size: 17px;
  font-family: sans-serif;
}

.about {
  background-color: gold;
  padding: 12px;
}

.notice {
  color: #666;
  border-left: 2px solid #808080;
  padding-left: 8px;
  margin: 20px 0 36px 0;
}

.change {
  font-variant-caps: all-small-caps;
}