Propriété CSS font-variant-caps

La propriété font-variant-caps vous permet de sélécter des glyphs altérnatifs pour petite capitales et titres. Cette propriété a les valeurs suivantes:

  • normal
  • small-caps
  • all-small-caps
  • petite-caps
  • all-petite-caps
  • unicase
  • titling-caps
Valeur initiale normal
Appliquée à Tous les éléments. Elle est appliquée aussi à ::first-letter et ::first-line.
Héritée Oui.
Animable Non.
Version CSS3
Syntaxe DOM object.style.fontVariantCaps = "petite-caps";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style>
      .all-small-caps {
      font-variant-caps: all-small-caps;
      font-style: italic;
      }
      .small-caps {
      font-variant-caps: small-caps;
      font-style: italic;
      }
      .normal {
      font-variant-caps: normal;
      font-style: italic;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété font-variant-caps</h2>
    <p class="all-small-caps">
      La propriété CSS font-variant-caps contrôle l'utilisation des glyphs altérnatifs pour lettres majuscules.
    </p>
    <p class="small-caps">Small caps!</p>
    <p class="normal">Normal caps!</p>
  </body>
</html>

Valeurs

Valeur Description
normal L'utilisation des glyphs altérnatifs n'est pas activée.
small-caps Permet d'afficher les petites capitales. Les glyphs small-caps utilise le formulaire des lettres majuscules, mais ils sont réduits à la taille des lettres minuscules.
all-small-caps Permet d'afficher les petites capitales pour les lettres majuscules et minuscules.
petite-caps Permet d'afficher les petites capitales.
all-petite-caps Permet d'afficher les petites capitales pour les lettres majuscules et minuscules.
unicase Permet d'afficher le mélange des petites capitales pour les lettres majuscules avec lettres minuscules normals.
titling-caps Permet d'afficher les capitales titrants.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome edge firefox safari opera
52.0+ 34.0+ 9.1+ 39.0+

Pratiquez vos connaissances

Qu'est-ce que la propriété 'font-variant-caps' en CSS fait?
Trouvez-vous cela utile?