<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.