OUJOOD.COM
Comment utiliser font-variant pour donner du style à votre site web
La propriété font-variant est une propriété CSS servant à définir l'affichage d'un texte en petites capitales (small-caps). Elle permet de transformer les lettres minuscules en majuscules de taille réduite.
Définition et utilisation : la propriété font-variant
Dans une police en small-caps (petites capitales), toutes les lettres minuscules sont converties en majuscules. Toutefois, les lettres en majuscule converties apparaissent dans une police de plus petite taille que les lettres majuscules dans le texte original.
La propriété font-variant spécifie si un texte doit être affiché dans une police de petites capitales.
Cette propriété CSS est particulièrement utile pour mettre en valeur certaines parties du texte ou pour donner un aspect plus professionnel à un site web. Elle peut être utilisée en combinaison avec d'autres propriétés CSS pour créer un design cohérent et attrayant, comme la propriété font-feature-settings.
Exemple de code CSS
p {
font-variant: small-caps;
}Caractéristiques de la propriété
| Valeur par défaut | normal |
|---|---|
| Héritée | Oui |
| Animable | Non En savoir plus sur l'animable |
| Version | CSS1 |
| Syntaxe JavaScript | object.style.fontVariant = "small-caps" |
Prise en charge dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
| Navigateur |
|
|
|
|
|
|---|---|---|---|---|---|
| Version | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ |
Valeurs de la propriété
| Valeur | Description |
|---|---|
normal |
Le navigateur affiche une police normale (valeur par défaut) |
small-caps |
Le navigateur affiche une police en petites capitales |
inherit |
Indique que le paramètre de la propriété doit être hérité de l'élément parent. (Non supporté par Internet Explorer 8 et versions antérieures) |
En résumé
La propriété CSS font-variant permet de spécifier l'affichage des caractères dans un élément de texte, en utilisant soit la valeur normal pour afficher le texte sans modification, soit la valeur small-caps pour afficher le texte en petites capitales.