CSS font-variant — капітель і варіанти шрифту

Властивість font-variant - це універсальна властивість для набору властивостей, які забезпечують контроль стилістичних функцій шрифтів.

У CSS1 та CSS2 ціль властивості font-variant полягала лише в тому, щоб визначити вигляд малих літер. У CSS3, хоча вона як і раніше дозволяє вказати всі малі букви прописними, вона була розширена, щоб бути універсальною властивістю для наступних властивостей:

• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric

Таким чином, у CSS3 властивість font-variant дозволяє вказати, які функції шрифту ввімкнути та як вони повинні працювати. Більшість сучасних шрифтів підтримують різні функції, які змінюють спосіб їх перегляду у певних випадках. Наприклад, ви можете зробити нестандартними цифри на сторінці, контролювати заміщення гліфів і розмір в східно-азіатському тексті тощо.

Не всі функції шрифту обов'язково будуть доступні для вас весь час. Деякі функції шрифту застосовуються лише до певних мовних сценаріїв або до певних мов або в певних режимах запису. Властивість font-variant дозволяє вам вмикати та / або керувати певними функціями, коли це потрібно.

правити

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

правити

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

Синтаксис

font-variant: normal|small-caps|initial|inherit;

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

normal

Без змін. Без задання.

автор: Svitlana

правити

<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>

Визначає ключові слова, пов'язані з властивістю font-variant-ligatures. Можливими значеннями є: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, і no-contextual.

автор: Svitlana

правити

stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()

Визначає ключові слова, пов'язані з властивістю font-variant-alternates.

автор: Svitlana

правити

small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

Визначає ключові слова, пов'язані з властивістю font-variant-caps.

автор: Svitlana

правити

<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero

Визначає ключові слова, пов'язані з властивістю font-variant-numeric. Можливими значеннями є:lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, i slashed-zero.

автор: Svitlana

правити

<east-asian-variant-values>, <east-asian-width-values>, ruby

Визначає ключові слова, пов'язані з властивістю font-variant-east-asian. Можливими значеннями є:jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	4

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

Переглядач
	4.4	18	4	1

Приклади

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

<p class="normal">Звичайний: Приклад Тексту Css</p>
<p class="caps">small-caps: Приклад Тексту Css</p>

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

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

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

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

<p class="notice">Це тільки один з прикладів використання <strong>font-variant</strong>, тому що у CSS3 вона стала універсальної і тепер за допомогою неї можна записувати декілька властивостей одночасно: <em>font-variant-alternates</em>, <em>font-variant-caps</em>, <em>font-variant-east-asian</em>, <em>font-variant-ligatures</em>, <em>font-variant-numeric</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: small-caps;
}

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

<p>У цьому прикладі, Ви можете визначити вигляд малих літер.</p>

<div class="inputs">
  <input id="normal" checked name="font-variant" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Без задання.</message>
  
  <input id="small-caps" name="font-variant" type="radio"/>
  <label for="small-caps">small-caps</label>
  <message for="small-caps">Вказати всі малі букви прописними.</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: titling-caps;
}

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', this.id));

}));

<p class="normal">Довідник CSS.in.ua — Тарас Шевченко</p>
<p class="caps">Довідник CSS.in.ua — Тарас Шевченко</p>
<p class="upper">Довідник CSS.in.ua — Тарас Шевченко</p>

<ul>
    <li><code>normal</code> — як є</li>
    <li><code>font-variant: small-caps</code> — капітель</li>
    <li><code>text-transform: uppercase</code> — усе великими</li>
</ul>

body {
    font-family: Georgia, serif;
    font-size: 22px;
    padding: 16px;
}

p {
    margin: 0 0 8px;
    padding: 6px;
    border-bottom: 1px solid #ddd;
}

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

.upper {
    text-transform: uppercase;
}

ul {
    font-family: monospace;
    font-size: 13px;
    color: #555;
    margin-top: 16px;
}