font-variant-caps

La propriété font-variant-caps permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.

Si les toutes petites capitales ne sont pas présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes en majuscule. Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite majuscule.

Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :
  • Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes i/İ et ı/I.
  • En allemand (de), ß devient SS en majuscule.
  • En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (ά/Α), sauf pour le eta disjonctif (ή/Ή). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle  (άι/ΑΪ).

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* Valeurs globales */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

Valeurs

normal
Ce mot-clé désactive l'utilisation des glyphes alternatifs.
small-caps
Ce mot-clé force l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType smcp ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.
all-small-caps
Cet mot-clé force l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType smcp et c2sc ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.
petite-caps
Cet mot-clé force l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType pcap ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.
all-petite-caps
Cet mot-clé force l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType pcap et c2pc ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.
unicase
Cet mot-clé force l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType unic.
titling-caps
Ce mot-clé force l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType titl ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.

Syntaxe formelle

normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

Exemples

CSS

.exemple {
  font-variant-caps: small-caps;
}

HTML

<p>
  La Reine devint pourpre de colère ; et
  après l’avoir considérée un moment avec 
  des yeux flamboyants comme ceux d’une
  bête fauve, elle se mit à crier : 
  « <span class="exemple">Qu’on lui coupe la tête !</span> »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 3
La définition de 'font-variant-caps' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 52.0 34 (34) [1] ? 39 ?
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Support simple Pas de support 52.0 34.0 (34)[1] ? 39 ? 52.0

[1] Une implémentation expérimentale était disponible depuis Gecko 24 et pouvait être activée avec la préférence layout.css.font-features.enabled qui était activée par défaut sur les canaux Nightly et Aurora.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,