CSS - Propriété font-variant-caps

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.

Voir aussi la propriété raccourcie font-variant.

Syntaxes pour font-variant-caps.

• font-variant-caps: normal;
  démo
  DÉMO

  Valeur par défaut.
  Les caractères sont restitués tels qu'ils sont écrits dans le code HTML.

• font-variant-caps: small-caps;
  démo
  DÉMO

  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.

• font-variant-caps: all-small-caps;
  démo
  DÉMO

  Les caractères ont la forme des lettres majuscules et la taille des minuscules. Même pour 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'.

• font-variant-caps: petite-caps;
  démo
  DÉMO

  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'.

• font-variant-caps: all-petite-caps;
  démo
  DÉMO

  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'.

• font-variant-caps: unicase;
  démo
  DÉMO

  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 : le D dans notre exemple, mais d'autres lettres sont également affichées avec le glyphe des majuscules : R, T, etc.

  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'.

• font-variant-caps: titling-caps;
  démo
  DÉMO

  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'

• font-variant-caps: initial;

  La valeur initiale est normal.

• font-variant-caps: unset; font-variant-caps: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Voir aussi...

Polices et caractères - Propriétés.

• font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
• font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
• font-family : Définit le nom de la police de caractères.
• font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
• font-kerning : Ajustement du crénage entre caractères.
• font-size : Ajuste la taille des caractères.
• font-size-adjust : Définition du coefficient d'aspect de la police.
• font-stretch : Modifie l'étirement ou la compression des caractères.
• font-style : Sélectionne les styles italique ou oblique de la police de caractères.
• font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
• font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
• font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
• font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
• font-variant-ligatures : Active ou désactive la ligature des caractères.
• font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
• font-weight : Sélectionne une graisse pour les caractères.
• text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
• text-decoration-color : Définit la couleur du trait de décoration.
• text-decoration-line : Type de décoration : souligné, barré, etc.
• text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
• text-shadow : Ombrage du texte.
• text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
• @font-feature-values : Définit les variantes typographiques à utiliser.