Propriété CSS font-weight

❮ Précédent Suivant ❯

La propriété font-weight est utilisée pour définir la graisse et la épaisseur de la police. Mais il y a quelques polices qui ne définissent pas tous les poids. Elles ne sont disponibles que à normal ou bold.

Les polices courantes comme Arial, Helvetica, Georgia, etc., n’ont pas de poids autre que 400 et 700.

Valeur initiale	normal
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Oui.
Animable	Oui.
Version	CSS1
Syntaxe DOM	object.style.fontWeight = "bolder";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.bolder {
      font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété font-weight</h2>
    <p class="bolder">Nous avons utilisé un texte gras ici.</p>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple avec tous les valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété font-weight</h2>
    <p class="normal">Nous avons utilisé un poid normal ici.</p>
    <p class="lighter">Ce poid est plus léger.</p>
    <p class="bold">Un poid gras.</p>
    <p class="bolder">Un texte plus gras.</p>
    <p class="fweight">Poid de police est 600 ici.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
normal	Signifie que les caractères seront normals. C'est la valeur initiale de cette propriété.
bold	Définit les caractères épais.
bolder	Définit les caractères plus épais dans le texte.
lighter	Définit les caractères plus légers.
100 200 300 400 500 600 700 800 900	Nous pouvons utiliser ces valeurs pour définir les caractères de texte de mince à épais. 400 est identique à la normale, tandis que 700 rend les caractères identiques en gras.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.