font-size
Définit la taille de la police.
- Valeur initiale
medium- Héritée
- Oui
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments
- JavaScript
element.style.fontSize = "1.25rem"
Exemple
#html { font-size: 100%; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
p { font-size: 1rem; }
small { font-size: 0.875rem; }<h1 style="font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0">Cours CSS</h1>
<p style="font-size: 1rem; margin: 6px 0">Le texte de base fait 1rem.</p>
<small style="font-size: 0.875rem; color: #a3a3a3;">Une petite note fait 0.875rem.</small>Définition et utilisation
#La propriété font-size détermine la taille du texte. On utilise le plus souvent les unités rem, em, px et les pourcentages. 1rem correspond à la taille de police de l’élément html (généralement 16px), et 1em à la taille de police du parent.
L’unité rem est prévisible, car elle se réfère toujours à la même valeur. em peut être piégeuse : en cas d’imbrication, les tailles se multiplient. En revanche, em fonctionne très bien pour les espacements à l’intérieur d’un composant, qui doivent grandir avec son texte.
La fonction clamp(min, préféré, max) permet de créer une typographie fluide : la taille augmente avec la largeur de l’écran, mais ne descend jamais sous le minimum ni ne dépasse le maximum.
Syntaxe
#font-size: <longueur> | <pourcentage> | small | medium | large | larger | smaller | …;Valeurs
#<longueur>
Une taille en pixels.<longueur>
Une fois et demie la taille de police de l’élémenthtml.<pourcentage>
Une fois et demie la taille de police du parent.- Un niveau plus grand que celui du parent.
clamp()
Une taille fluide dépendant de la largeur de la fenêtre, comprise entre 1 et 2rem.
Valeurs en pratique
#14px
.demo { font-size: 14px; }1.5rem
html..demo { font-size: 1.5rem; }150%
.demo { font-size: 150%; }larger
.demo { font-size: larger; }clamp(1rem, 5vw, 2rem)
.demo { font-size: clamp(1rem, 5vw, 2rem); }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne définissez pas la taille de
htmlen pixels.font-size: 100%respecte les réglages d’un utilisateur qui a agrandi la police dans son navigateur. - Sur les téléphones, les champs de formulaire avec une police inférieure à 16px font zoomer la page dans Safari sur iPhone.
Entrées associées
#- fontRaccourci qui définit le style, la graisse, la taille, l’interligne et la police en une seule fois.
- line-heightDéfinit la hauteur de chaque ligne de texte, l’espacement entre les lignes.
- font-familyChoisit une police, avec une liste de polices de secours en cas d’indisponibilité de la première.
- font-weightDéfinit la graisse de la police, du plus fin au plus gras.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.