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
52.0+ | ✕ | 34.0+ | 9.1+ | 39.0+ |
Pratiquez vos connaissances
Qu'est-ce que la propriété 'font-variant-caps' en CSS fait?
Correcte!
Incorrecte!