Propriété CSS font-weight

La propriété font-weight permet de définir le gras d'une police. Certaines polices ne prennent en charge que les poids normal et gras.

Valeur initiale	normal
S'applique à	Tous les éléments. Elle s'applique également à ::first-letter et ::first-line.
Héritée	Oui.
Animable	Oui.
Version	CSS1
Syntaxe DOM	`object.style.fontWeight = "bolder";`

Syntaxe

Syntaxe de la propriété CSS font-weight

css

font-weight: normal | bold | bolder | lighter | number | initial | inherit;

Exemple de la propriété font-weight :

Exemple de la propriété CSS font-weight avec la valeur bolder

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS font-weight Property

Exemple de la propriété font-weight avec toutes les valeurs :

Exemple de la propriété CSS font-weight avec les valeurs normal, lighter, bold, bolder et numérique

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
normal	Spécifie un poids normal. Il s'agit de la valeur par défaut.	Tester »
bold	Spécifie un poids gras (équivalent à 700).	Tester »
bolder	Spécifie un poids un niveau plus épais que la valeur calculée de l'élément parent.	Tester »
lighter	Spécifie un poids un niveau plus fin que la valeur calculée de l'élément parent.	Tester »
100 200 300 400 500 600 700 800 900	Définit un poids numérique allant de fin (100) à gras (900). `400` est équivalent à `normal`, et `700` est équivalent à `bold`.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de l'élément parent.

Pratique

Quelles propriétés la propriété CSS 'font-weight' spécifie-t-elle ?

Elle spécifie le poids ou l'épaisseur de la police.Elle spécifie le style de la police.Elle définit la façon dont les extrémités des lignes sont dessinées lorsque les polices sont contournées.Elle détermine si le texte est affiché avec un poids gras ou normal.Elle détermine la largeur des tabulations dans le texte.

Propriété CSS font-weight ​

Syntaxe ​

Exemple de la propriété font-weight : ​

Résultat ​

Exemple de la propriété font-weight avec toutes les valeurs : ​

Valeurs ​