Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

font-variant-caps - Propriété CSS

font-variant-caps

Résumé des caractéristiques de la propriété font-variant-caps

Description rapide
Applique une capitalisation des caractères.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
normal | small-caps | petite-caps | titling-caps | unicase | all-small-caps | all-petite-caps
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété font-variant-caps passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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.

Syntaxe de font-variant-capsSchéma syntaxique de la propriété CSS font-variant-caps (changement de la casse du texte). normal normal small-caps small-caps all-small-caps all-small-caps petite-caps petite-caps all-petite-caps all-petite-caps unicase unicase titling-caps titling-capsfont-variant-caps:;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.

Exemple d'Animation

Simulateur.

Police :

font-variant-caps :
Portez ce vieux Whisky au juge blond qui fume

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.

1
font-variant-caps
Estimation de la prise en charge en pourcentage du parc actuel.
94%

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.

Propriétés.

Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Ajustement du crénage entre caractères.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Sélectionne les styles italique ou oblique de la police de caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Mise en exposant ou en indice des caractères.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit les variantes typographiques à utiliser.
Définit une palette de couleurs appliable ensuite à une police de caractères.