font-weight

La propriété font-weight permet de définir la graisse utilisée pour le texte. Certaines fontes n'existent qu'avec les niveaux de graisses normal et bold.

Syntaxe

font-weight: normal;
font-weight: bold;

/* La graisse est relative à l'élément parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Valeurs globales */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

Valeurs

normal

Le niveau de graisse normal pour la fonte. Équivalent à la valeur 400.

bold

Le texte est en gras. Équivalent à la valeur 700.

lighter

On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.

bolder

On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.

100, 200, 300, 400, 500, 600, 700, 800, 900

Des valeurs numériques qui permettent de couvrir un éventail de valeurs plus larges qu'avec normal et bold.

Calcul de la fonte à utiliser

Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :

• Si un niveau supérieur à 500 est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)
• Si un niveau inférieur à 400 est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)
• Si un niveau égal à 400 est utilisé, 500 sera utilisé. Si 500 n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.
• Si un niveau égal à 500 est utilisé, 400 sera utilisé. Si 400 n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.

Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement normal et bold, 100-500 seront considérés équivalents à normal et 600-900 à bold.

Signification des poids relatifs

Lorsqu'on utilise les valeurs lighter ou bolder, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :

Correspondance entre les valeurs numériques et les noms communément utilisés

Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (NdT : les noms sont laissés en anglais car généralement utilisés tels quels) :

100

Thin (Hairline)

200

Extra Light (Ultra Light)

300

Light

400

Normal

500

Medium

600

Semi Bold (Demi Bold)

700

Bold

800

Extra Bold (Ultra Bold)

900

Black (Heavy)

Interpolation

Une valeur font-weight est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.

Syntaxe formelle

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Exemples

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Le texte du paragraphe est gras. */
p {
  font-weight: bold;
}

/* Le texte du div est deux niveaux plus sombres 
   mais moins gras qu'une graisse normale. */
div {
 font-weight: 600;
}

/* Le texte dans le span est un niveau plus  
   clair que le parent. */
span {
  font-weight: lighter;
}

Résultat

Spécifications

Compatibilité des navigateurs