Propriété CSS font-variant
La propriété CSS font-variant permet d'afficher le texte en normal ou en petites capitales. Découvrez des exemples !
La propriété CSS font-variant contrôle l'utilisation de glyphes alternatifs dans une police — le plus souvent les petites capitales. Les petites capitales restituent les lettres minuscules sous forme de lettres majuscules dessinées à peu près à la hauteur des minuscules d'origine, conférant aux titres, abréviations et acronymes un aspect soigné et régulier, sans l'effet criard des majuscules intégrales.
Dans sa forme classique (CSS 1), font-variant accepte l'une de deux valeurs : normal (la valeur par défaut) ou small-caps. Avec small-caps, les lettres minuscules sont converties en glyphes majuscules affichés légèrement plus petits que les lettres majuscules ordinaires, tandis que les lettres déjà en majuscules conservent leur taille normale.
Quand l'utiliser
font-variant: small-caps est utile lorsque vous souhaitez mettre en valeur le texte de façon élégante plutôt qu'agressive :
- Les acronymes et abréviations dans le corps du texte (par exemple « html », « css »), afin qu'ils ne dominent pas la ligne avec des capitales de pleine hauteur.
- Le style de lettrine ou d'introduction sur la première ligne d'un article, souvent combiné avec ::first-line.
- Les titres, signatures et légendes de figures dans des mises en page éditoriales ou de style imprimé.
La valeur étant héritée, l'appliquer à un conteneur l'étend à tous les textes descendants, sauf si un enfant la remplace.
La propriété font-variant peut également être définie dans le cadre d'une déclaration raccourcie font, aux côtés de font-style, font-weight, font-size et font-family.
Dans le module CSS Fonts de niveau 4, font-variant est devenu une propriété raccourcie pour une famille de propriétés longues : font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures et font-variant-east-asian. Cela lui permet d'accepter bien plus de valeurs (comme all-small-caps, petite-caps, oldstyle-nums et slashed-zero). Les valeurs classiques normal et small-caps fonctionnent partout ; la prise en charge des nouvelles valeurs dépend à la fois du navigateur et du fait que la police choisie contient effectivement ces glyphes.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.fontVariant = "normal"; <br>(Remarque : fontVariant est le nom de la propriété JavaScript en camelCase pour font-variant.) |
Syntaxe
Syntaxe de la propriété CSS font-variant
font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;Exemple de la propriété font-variant :
Exemple de la propriété CSS font-variant avec small-caps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">However, this text uses small-caps.</p>
</body>
</html>Résultat
Un deuxième exemple : all-small-caps
La valeur all-small-caps (issue du raccourci de niveau 4) affiche chaque lettre en petites capitales, y compris celles déjà en majuscules — pratique pour les titres où vous souhaitez un aspect uniforme en petites capitales.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.small {
font-variant: small-caps;
}
.all {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<p class="small">The Quick Brown Fox</p>
<p class="all">The Quick Brown Fox</p>
</body>
</html>Avec small-caps, les lettres majuscules de « The », « Quick », « Brown » et « Fox » conservent leur pleine hauteur ; avec all-small-caps, elles sont également réduites à la hauteur des petites capitales.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| normal | Les caractères du texte sont rendus normalement. C'est la valeur par défaut. | Essayer » |
| small-caps | Convertit les lettres minuscules en glyphes majuscules affichés à une taille réduite ; les majuscules existantes conservent leur taille complète. | Essayer » |
| all-small-caps | Convertit les lettres minuscules et majuscules en petites capitales (niveau 4). | Essayer » |
| petite-caps | Comme small-caps mais en utilisant les glyphes petite-caps, lorsque la police les fournit (niveau 4). | Essayer » |
| initial | Définit la propriété à sa valeur par défaut (normal). | Essayer » |
| inherit | Hérite de la valeur de la propriété de l'élément parent. |
Propriétés associées
- font — le raccourci qui peut inclure
font-variant. - font-style — texte normal, italique ou oblique.
- font-weight — graisse du texte.
- text-transform — force
uppercase/lowercase/capitalize(modifie les caractères, contrairement aux petites capitales qui ne changent que la forme du glyphe). - letter-spacing — se marie bien avec les petites capitales pour améliorer la lisibilité des acronymes.