font-variant-caps - Propriété CSS
Résumé des caractéristiques de la propriété font-variant-caps
normal
| small-caps
| petite-caps
| titling-caps
| unicase
| all-small-caps
| all-petite-caps
normal
font-variant-caps
passe d'une valeur à l'autre sans transition.Description de la propriété font-variant-caps
.
font-variant-caps
définit la capitalisation des caractères : en petites majuscules, en caractères de titre, etc.
En principe, ces différents formes de caractères sont définies par la police elle-même. Dans le cas contraire, le navigateur peut simuler
une mise en capitales, avec un rendu cependant moins bon.
Voir aussi la propriété résumée font-variant
, et font-synthesis-small-caps
pour autoriser ou non le navigateur à simuler les changements de casse.
Syntaxes pour font-variant-caps
.
- font-variant-caps: normal;
Valeur par défaut.
Les caractères sont restitués tels qu'ils sont écrits dans le code HTML.Échantillon - font-variant-caps: small-caps;
Les caractères ont la forme des lettres majuscules et la taille des minuscules. La hauteur des majuscules originales est cependant conservée.
La valeur
small-caps
est équivalente àfont-feature-settings:'smcp'
. Voir la propriétéfont-feature-settings
pour l'utilisation bas niveau des possibilités des polices Open Type.Échantillon - font-variant-caps: all-small-caps;
Les caractères ont la forme des lettres majuscules et la taille des minuscules. Même les lettres qui sont originalement en majuscules sont réduites à la taille des minuscules.
La valeur
all-small-caps
est équivalente àfont-feature-settings:'c2sc'
.Échantillon - font-variant-caps: petite-caps;
Les caractères ont la forme des petites capitales et la taille des minuscules. La taille des lettres initialement en majuscule est conservée.
Si les petites capitales ne sont pas disponibles dans la police utilisée, le navigateur traite cette valeur comme
small-caps
.La valeur
petite-caps
est équivalente àfont-feature-settings:'pcap'
.Échantillon - font-variant-caps: all-petite-caps;
Les caractères ont la forme des petites capitales et la taille des minuscules. Les lettres initialement en majuscules sont également réduites à la taille des minuscules.
Si les petites capitales ne sont pas disponibles dans la police utilisée, le navigateur traite cette valeur comme
all-small-caps
.La valeur
all-petite-caps
est équivalente àfont-feature-settings:'c2pc'
.Échantillon - font-variant-caps: unicase;
Les caractères ont la forme des lettres minuscules mais la taille des majuscules. Pour des raisons esthétiques, certaines lettres prennent la forme des majuscules : on le voit sur notre exemple avec les lettres
H
,L
,T
, mais d'autres lettres prennent le glyphe des majuscules.Si cette option n'est pas disponible dans la police utilisée, le navigateur simule en agrandissant la taille des minuscules.
unicase
affiche donc une combinaison de lettres minuscules et majuscules, toutes dans la hauteur des majuscules.La valeur
unicase
est équivalente àfont-feature-settings:'unic'
.Échantillon - font-variant-caps: titling-caps;
Les lettres majuscules sont conçues pour être utilisées en association avec des lettres minuscules. Dans le cas de titres entièrement en majuscules, le glyphe des majuscules n'est pas forcément optimisé : les lettres peuvent sembler trop épaisses.
titling-caps
résout ce problème en basculant sur un jeu de majuscules moins épaisses.Si la police utilisée ne supporte pas cette option, l'utilisation de
titling-caps
n'aura pas d'effet visible.La valeur
titling-caps
est équivalente àfont-feature-settings:'tilt'
Échantillon - font-variant-caps:
initial
; font-variant-caps:inherit
; font-variant-caps:revert
; font-variant-caps:revert-layer
; font-variant-caps:unset
;La valeur initiale est :
.normal
Animation de la propriété font-variant-caps
.
Ci-dessous un exemple de ce que peut donner l'animation de la propriété font-variant-caps
.
On peut noter un petit détail pas très réussi au niveau de l'apostrophe : il ne s'aligne pas sur le haut de
la lettre D.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
font-variant-caps
est la plus ancienne de la famille de propriétés font-variant...
. En conséquence elle est
bien reconnue et bien traitée par tous les navigateurs.
font-variant-caps
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que font-variant-caps
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-variant-caps
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.