Font-size - Propriété CSS
Résumé des caractéristiques de la propriété font-size
em, ex, etc.medium | small | x-small | xx-small | large | x-large | xx-large | xxx-large | smaller | largermediumfont-size passe progressivement d'une valeur à une autre.Schéma syntaxique de font-size.
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
lengthest une valeur numérique positive suivie d'une des unités de dimension.%est un pourcentage calculé par rapport à la taille des caractères de l'élément parent.
Description.
La propriété font-size définit la taille des caractères.
La taille réelle des caractères peut être sensiblement différente de celle qui est demandée, à cause de font-size-adjust.
Néanmoins les enfants héritent de la valeur calculée de font-size non affectée par font-size-adjust, sans quoi l'effet de
font-size-adjust serait appliqué deux fois.
Pour préserver la lisibilité, les tailles de polices inférieures à 9 pixels ne devraient jamais être utilisés.
Pour les polices variables, la taille de police est un facteur de em. Pour les polices non variables, la taille est convertie en unités absolues,
et comparée à celle déclarée dans la police.
Les différents usages de font-size.
Le mot font-size correspond à une propriété, permettant de choisir une taille de caractères (ce qui est décrit sur cette page), mais également à un descripteur
utilisable avec les directives suivantes :
@font-face: Définit tous les paramètres d'une police de caractères téléchargeable.
Valeurs pour font-size.
- font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large;
Tailles de caractères prédéfinies par CSS. La valeur par défaut est
medium.
Voici le rapport entre ces différentes tailles, relativement àmedium.Valeur CSS Ratio par
rapport àmediumTitre HTML
équivalentTaille HTML
équivalentexx-small0.6 (3/5) h6 font size="1" x-small0.75 (3/4) small0.89 (8/9) h5 font size="2" medium1 h4 font size="3" large1.2 (6/5) h3 font size="4" x-large1.5 (3/2) h2 font size="5" xx-large2 h1 font size="6" xxx-large3 font size="7" En CSS1, le coefficient multiplicateur entre deux tailles successives étaient préconisé à
1.5. En CSS2, il a été réduit pour se rapprocher de1.2. Actuellement ce coefficient varie autour de1.18 - 1.25.
Voici ce que donnent ces différentes tailles sur votre navigateur:font-size:xx-smallfont-size:x-smallfont-size:smallfont-size:mediumfont-size:largefont-size:x-largefont-size:xx-largefont-size:xxx-large - font-size: 12px;
Une valeur numérique positive, suivie d'une unité de dimension (voir les unités de dimension). Certaines unités sont spécifiquement adaptées aux tailles de caractères :
pt,em,rem,ch,ex, etc.
La valeur doit être positive.
Si la valeur est exprimée en pourcentages, ceux-ci sont calculées par rapport à la taille des caractères de l'élément parent.
L'unitéemest évaluée de la même façon, tandis que l'unitéremest évaluée par rapport à la taille des caractères de l'élément racine (balise html ou sélecteur:root).Élément parent,font-size:mediumÉlément enfant,font-size:150% - font-size: smaller; font-size: larger;
La taille des caractères de l'élément ciblé est définie par rapport à la taille des caractères de l'élément parent.
Si l'élément parent a une taille de caractères définie d'après une valeur prédéfinie (de
xx-smallàxxx-large), la valeursmallercorrespond à la taille prédéfinie immédiatement inférieure.
Etlargercorrespond à la taille prédéfinie immédiatement supérieure.Si l'élément parent est dans une taille de caractères non prédéfinie, le navigateur calcule la taille des caractères de l'élément ciblé en appliquant un coefficient.
Élément parent,font-size:mediumÉlément enfant,font-size:largerÉlément enfant,font-size:smaller - font-size: math;
Des règles spécifiques à l'écriture des formules mathématiques sont appliquées pour déterminer la taille des caractères : la taille de la police varie en fonction de la propriété
math-depth.Exemple :
Valeurs communes :
font-size: initial (medium)
font-size: inherit
font-size: revert
font-size: revertLayer
font-size: unset
Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.
Animation de la propriété font-size.
L'animation de la taille des caractères est très fluide, même si l'animation est décrite avec les valeurs prédéfinies
(small, medium, etc.) car ces valeurs sont équivalentes à des nombres, ce qui permet
de calculer autant de valeurs intermédiaires que nécessaires.
Manipulation de la propriété font-size par Javascript.
Modifier la valeur de font-size en Javascript.
Le code ci-dessous, en Javascript, modifie la valeur de font-size pour un élément el.
Le nom de la propriété peut être écrit en kebab-case (un tiret pour séparer les mots) ou en camel-case
(une majuscule pour séparer les mots), Javascript acceptant les deux syntaxes.
let el = document.getElementById('id');
let value = el.style['font-size'];
// ou
let el = document.getElementById('id');
let value = el.style.fontSize;
Lire en Javascript la valeur de font-size.
Pour que ce code fonctionne, la propriété doit avoir été affectée directement à l'élément lui-même et non pas via un sélecteur CSS.
La valeur est renvoyée telle qu'elle a été définie : dans la même unité, ou éventuellement une valeur prédéfinie (small, medium, etc.).
let el = document.getElementById('id');
el.style['font-size'] = '2rem';
// ou
let el = document.getElementById('id');
el.style.fontSize = '2rem';
Lire la valeur calculée de font-size en Javascript.
La valeur calculée est celle qui résulte de l'évaluation des unités relatives, en particulier dans le cas des tailles de polices, des unités telles que
rem, em, etc. Si aucune valeur de font-size n'est définie pour cet élément, la valeur calculée est déterminée par héritage.
La valeur calculée est rendue en pixels, quelque soit l'unité utilisée pour la définir.
Modifier la valeur de la propriété font-size avec JQuery.
$('#id').css('font-size', '2rem');
// ou
$('#id').css('fontSize', '2rem');
Lire la valeur calculée de la propriété font-size avec JQuery.
Comme en Javascript, la valeur est retournée en pixels, quelque soit l'unité utilisée pour la définir.
let value = $('#id').css('font-size');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété font-size et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de font-size.
On constate en particulier toutes les unités sont converties en pixels.
Simulateur avec la propriété font-size.
Compatibilité et prise en charge.
font-size permettant de définir la taille de la police de caractères.xxx-large pour la propriété font-size. Cette valeur a été ajourée après la définition initiale de la propriété, mais sa prise en charge est maintenant correcte.font-sizexxx-largeNavigateurs 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
Évolution de font-size.
font-size est une propriété dont la définition est ancienne (déjà présente sur la première spécification du langage CSS). Quelques valeurs ont
été ajoutées au fil des nouvelles versions de la spécification.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Définition initiale de la propriétéfont-size.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Prise en charge de nouvelles valeurs pour la propriété :
- Une valeur suivie d'une unité de dimension ou un pourcentage.
- La valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Polices de caractères - Niveau 3
Pas de changement concernant cette propriété.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
Ajout de la valeurmath
Ajout de la valeurxxx-large.11 Juillet 2017Document de travail. -
Module CSS - Polices de caractères - Niveau 5
Pas de modification concernant la propriété elle-même.
font-sizeest également un descripteur pour la directive@font-face.29 Juin 2021Document de travail.
Voir aussi, à propos des polices de caractères.
Les propriétés qui concernent les polices de caractères sont regroupées dans le module CSS Fonts Module. Vous trouvez leur définition ci-dessous :
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.