Propriété CSS font-variant-caps
La propriété CSS font-variant-caps permet de sélectionner des glyphes alternatifs pour les petites capitales et les capitales de titrage.
La propriété CSS font-variant-caps contrôle l'utilisation de glyphes alternatifs pour les lettres majuscules, tels que les petites capitales, les petites capitales réduites et les capitales de titrage. En CSS1 et CSS2, ces valeurs étaient sélectionnées via la propriété plus générale font-variant ; en CSS3, font-variant est devenu un raccourci et font-variant-caps a été séparé comme sa propre propriété longue.
Cette page couvre ce que fait chaque valeur, quand l'utiliser, la différence entre font-variant-caps et text-transform, ainsi que la réserve OpenType qui détermine si vous obtenez de vraies petites capitales ou une solution de repli.
Les valeurs disponibles sont :
normalsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-caps
Lorsqu'une police inclut des glyphes de lettres majuscules à différentes tailles, font-variant-caps sélectionne les plus appropriés. Si une police ne fournit pas de glyphes dédiés aux petites capitales, le navigateur les synthétise en réduisant les glyphes majuscules normaux — l'effet fonctionne donc toujours, mais un résultat synthétisé est moins raffiné qu'une vraie face de petites capitales conçue à cet effet.
Le rendu effectif dépend donc du support des fonctionnalités OpenType de la police.
Pourquoi utiliser font-variant-caps
Les petites capitales sont une convention typographique, pas seulement une astuce de style. Utilisez font-variant-caps lorsque vous souhaitez :
- Que les acronymes et abréviations (NASA, HTML, PDF) s'intègrent visuellement au poids du texte en minuscules environnant plutôt que de ressortir en grandes capitales.
- Que les sous-titres, signatures ou la première ligne d'un article se distinguent sans changer la taille ou la graisse de la police.
- Que le texte juridique ou les en-têtes courants présentent une couleur uniforme et soignée sur toute la ligne.
Contrairement à text-transform: uppercase, font-variant-caps ne modifie pas le texte sous-jacent — les lecteurs d'écran lisent toujours la casse d'origine, et le résultat utilise des glyphes conçus à cet effet plutôt que de simples majuscules agrandies. Préférez font-variant-caps chaque fois que l'objectif est un style typographique sur un texte dont la casse est déjà correcte.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritage | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontVariantCaps = "petite-caps"; |
Syntaxe
Syntaxe de la propriété CSS font-variant-caps
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
<!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>Résultat
![Propriété CSS font-variant-caps](https://api.w3docs.com/uploads/media/default/0001/03/ceee914d009da29a1afecc4c3ff8691af0fdd54b.png "Rendu de la propriété CSS font-variant-caps avec small-caps, all-small-caps et texte normal" =420x)
font-variant-caps vs. text-transform
Il est facile de confondre font-variant-caps: small-caps avec text-transform: uppercase. Elles semblent similaires mais se comportent différemment :
<!DOCTYPE html>
<html>
<head>
<title>small-caps vs. uppercase</title>
<style>
.smallcaps {
font-variant-caps: small-caps;
}
.upper {
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="smallcaps">The agency known as nasa.</p>
<p class="upper">The agency known as nasa.</p>
</body>
</html>Dans le premier paragraphe, les lettres minuscules sont affichées sous forme de petites capitales tandis que le texte original en minuscules est préservé (un lecteur d'écran lit toujours « nasa »). Dans le second, chaque lettre est forcée en majuscule pleine hauteur et le texte rendu se lit « THE AGENCY KNOWN AS NASA ». Utilisez font-variant-caps pour un raffinement typographique et text-transform lorsque vous avez réellement besoin de modifier la casse.
Valeurs
| Valeur | Description |
|---|---|
| normal | L'utilisation de glyphes alternatifs n'est pas activée. |
| small-caps | Affiche de petites capitales. Les glyphes de petites capitales utilisent la forme des lettres majuscules, mais sont réduits à la taille des lettres minuscules. |
| all-small-caps | Affiche des petites capitales aussi bien pour les lettres majuscules que minuscules. |
| petite-caps | Affiche des capitales réduites. |
| all-petite-caps | Affiche des capitales réduites pour les lettres majuscules et minuscules. |
| unicase | Affiche un mélange de petites capitales pour les lettres majuscules et de lettres minuscules normales. |
| titling-caps | Affiche des capitales de titrage. |
Remarque : initial et inherit sont des mots-clés CSS universels et peuvent être utilisés avec n'importe quelle propriété CSS.
Compatibilité des navigateurs
| Navigateur | Support |
|---|---|
| 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 peuvent la remplacer.
Propriétés associées
font-variant-caps est l'une des nombreuses propriétés longues que le raccourci font-variant contrôle. Les propriétés sœurs permettent d'affiner d'autres fonctionnalités OpenType :
font-variant-ligatures— contrôle les ligatures courantes, discrétionnaires et historiques.font-variant-numeric— choisit entre les chiffres alignés/anciens, les fractions et les ordinaux.font-variant-alternates— sélectionne les alternances stylistiques et de caractères fournies par une police.font-feature-settings— la porte de sortie de bas niveau pour toute fonctionnalité OpenType par son code à quatre caractères.text-transform— modifie la casse réelle des lettres du texte.