Propriété CSS font-weight

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>

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>

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.

Support de Navigateurs

2.0+ 12.0+ 1.0+ 1.3+ 3.5+


Trouvez-vous cela utile?

Articles Associées