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-capsnormalfont-variant-caps passe d'une valeur à l'autre sans transition.Schéma syntaxique de font-variant-caps.
font-variant-capsLes liens du schéma donnent accès à plus de détails
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-capsest équivalente àfont-feature-settings:'smcp'. Voir la propriétéfont-feature-settingspour 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-capsest é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-capsest é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-capsest é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.
unicaseaffiche donc une combinaison de lettres minuscules et majuscules, toutes dans la hauteur des majuscules.La valeur
unicaseest é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-capsré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-capsn'aura pas d'effet visible.La valeur
titling-capsest équivalente àfont-feature-settings:'tilt'Échantillon
Valeurs globales
(communes à toutes les propriétés)
font-variant-caps: initial (normal)
font-variant-caps: inherit
font-variant-caps: revert
font-variant-caps: revertLayer
font-variant-caps: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
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.
Manipulation de la propriété font-variant-caps avec Javascript.
Avec Javascript, modifier la valeur de font-variant-caps.
En Javascript, voici un exemple de code pour modifier la valeur de font-variant-caps.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe en camel-case, plus courante
en Javascript
let el = document.getElementById('id');
el.style['font-variant-caps'] = 'unicase';
// ou
let el = document.getElementById('id');
el.style.fontVariantCaps = 'unicase';
Avec Javascript, lire la valeur de font-variant-caps.
Le code ci-desdsous récupère la valeur de font-variant-caps affectée à un élément via son attribut style. La valeur affectée via un sélecteur CSS
n'est pas prise en compte.
let el = document.getElementById('id');
let value = el.style['font-variant-caps'];
// ou
let el = document.getElementById('id');
let value = el.style.fontVariantCaps;
Avec Javascript, lire la valeur calculée de font-variant-caps.
La valeur calculée est celle qui résulte de la cascade des héritages. A défaut ce sera la valeur initiale, soit normal dans le cas de font-variant-caps.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('font-variant-caps');
Avec JQuery, modifier la valeur de font-variant-caps.
JQuery permet également de modifier ou de lire la valeur d'une propriété, avec une syntaxe plus courte que celle de Javascript.
$('#id').css('font-variant-caps', 'unicase');
// ou
$('#id').css('fontVariantCaps', 'unicase');
Avec JQuery, lire la valeur calculée de font-variant-caps.
let value = $('#id').css('font-variant-caps');
Autres exemples de code.
Reportez-vous à la page Javascript et CSS pour d'autres exemples de code de manipulation des styles en dynamique, via un langage.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété font-variant-caps et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. dans le cas de font-variant-caps le résultat sera le même puisque cette propriété n'accepte que des valeurs prédéfinies (pas de calculs
sur ces valeurs).
Exemple interactif avec la propriété font-variant-caps.
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-capsNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété font-variant-caps.
-
Module CSS - Polices de caractères - Niveau 3
Introduction de la propriétéfont-variant-caapsdans ce niveau 3 de la spécification concernant les polices de caractères.
21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.
14 Août 2018Proposé à la recommandation.
20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Pas de changement concernant la propriétéfont-variant-caps.11 Juillet 2017Document de travail. -
Module CSS - Polices de caractères - Niveau 5
29 Juin 2021Document de travail.
Voir aussi, au sujet des polices de caractères.
La spécification CSS Fonts Module regroupe tout ce qui concerne les polices de caractères, la typographie, l'exploitation des possibilités des formats de polices modernes, le téléchargement de polices, etc. c'est à dire les définitions suivantes :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.