Julien Crego
CSS : font-weight
Description
La propriété font-weight permet de définir la graisse (l’épaisseur du texte) pour un élément HTML.
Elle s’applique aux titres, paragraphes, liens, spans, etc. La valeur peut être un mot-clé ou un nombre, selon la police utilisée.
Les polices dites variables (variable fonts) permettent généralement de gérer la graisse très précisément.
Propriétés détaillées
font-weight: définit l’épaisseur du texte.font-style: gère l’italique (souvent utilisé en complément).
Valeurs possible
Voici les valeurs les plus courantes utilisables avec font-weight :
| Type | Exemple | Description |
|---|---|---|
| Mots-clés | normal, bold | normal équivaut à 400 et bold à 700. |
| Nombres | 100, 300, 400, 700 | Valeurs par paliers de 100. Plus le nombre est élevé, plus le texte est épais. |
| Bolder / Lighter | bolder, lighter | Épaisseur relative à l’élément parent. |
Exemple
HTML
<p>Ceci texte est en exemple de font-weight</p>
CSS
.font-weight { font-weight: 700;}Aperçu du résultat
Ceci texte est en exemple de font-weight.
Remarques
- Toutes les valeurs ne sont pas toujours disponibles selon la police utilisée (certaines n’ont que normal et bold).
- Les polices « variables » permettent des valeurs précises entre 1 et 1000 (selon les règles définies par le créateur de la police).
- Éviter un texte trop fin sur mobile (
100ou200) car la lisibilité peut en souffrir.