Propriété CSS font-variant-caps

En CSS1 et CSS2, la propriété font-variant spécifiait les petites capitales. En CSS3, elle est devenue un raccourci pour plusieurs propriétés, dont font-variant-caps. Cette propriété permet de sélectionner des glyphes alternatifs pour les petites capitales, les petites capitales réduites et les capitales de titre. Les valeurs courantes incluent :

normal
small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps

Lorsque la police donnée comporte des glyphes de lettres majuscules de tailles différentes, la propriété font-variant-caps sélectionne les plus appropriés. Si les glyphes de petites capitales ne sont pas disponibles, ils sont rendus à l'aide de glyphes majuscules.

Le rendu effectif dépend de la prise en charge des fonctionnalités OpenType par la police.

Valeur initiale	normal
S'applique à	Tous les éléments. Elle s'applique également à ::first-letter et ::first-line.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.fontVariantCaps = "petite-caps";

Syntaxe

Syntaxe de la propriété CSS font-variant-caps

css

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

Exemple de la propriété font-variant-caps :

Exemple de la propriété CSS font-variant-caps avec les valeurs all-small-caps, small-caps et normal

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .all-small-caps {
        font-variant-caps: all-small-caps;
      }
      .small-caps {
        font-variant-caps: small-caps;
      }
      .normal {
        font-variant-caps: normal;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-caps property example</h2>
    <p class="all-small-caps">
      The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
    </p>
    <p class="small-caps">Small caps!</p>
    <p class="normal">Normal caps!</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS font-variant-caps Property

Valeurs

Valeur	Description
normal	L'utilisation de glyphes alternatifs n'est pas activée.
small-caps	Affiche des petites capitales. Les glyphes small-caps utilisent la forme des lettres majuscules, mais sont réduits à la taille des lettres minuscules.
all-small-caps	Affiche des petites capitales pour les lettres majuscules et minuscules.
petite-caps	Affiche des petites capitales réduites.
all-petite-caps	Affiche des petites capitales réduites pour les lettres majuscules et minuscules.
unicase	Affiche un mélange de petites capitales pour les lettres majuscules avec des lettres minuscules normales.
titling-caps	Affiche des capitales de titre.

Remarque : initial et inherit sont des mots-clés CSS génériques et peuvent être utilisés avec n'importe quelle propriété CSS.

Compatibilité des navigateurs

Navigateur	Prise en charge
Chrome	48+
Edge	79+
Firefox	34+
Safari	9.1+
Opera	35+

Remarque : font-variant-caps fait partie du raccourci font-variant. Lors de l'utilisation du raccourci, incluez explicitement font-variant-caps pour conserver sa valeur, car d'autres valeurs du raccourci pourraient l'écraser.

Pratique

Que fait la propriété CSS 'font-variant-caps' ?

Elle est utilisée pour transformer le texte en majuscules ou en minuscules.Elle permet à l'utilisateur d'ajuster la casse du texte.Elle est utilisée pour contrôler le poids (gras) de la police.Elle permet de contrôler l'utilisation de glyphes alternatifs pour les lettres majuscules et les petites capitales.Elle permet d'utiliser des styles de police uniques.

Propriété CSS font-variant-caps ​

Syntaxe ​

Exemple de la propriété font-variant-caps : ​

Résultat ​

Valeurs ​

Compatibilité des navigateurs ​