font-weight

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété CSS font-weight permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. font-family). Certaines fontes n'existent qu'avec les niveaux de graisses normal et bold.

Exemple interactif

Syntaxe

css
/* Valeurs avec un mot-clé */
font-weight: normal;
font-weight: bold;

/* Valeurs relatives à l'élément parent */
font-weight: lighter;
font-weight: bolder;

/* Valeurs numériques */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* gras */
font-weight: 800;
font-weight: 900;

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

La propriété font-weight peut être définie grâce à l'une des valeurs suivantes.

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.

<number>

Une valeur numérique (type <number>) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec normal et bold.

Pour d'anciennes versions de la spécification, font-weight n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).

Le module de spécification CSS Fonts de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleure précision quant aux tailles utilisables.

Conversion des valeurs

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 c'est un niveau entre 400 et 500 (inclus) qui est utilisé :

    • On cherche les niveaux les plus proches entre la cible et 500, dans l'ordre croissant.
    • Si aucune correspondance n'est trouvée, on cherche les niveaux inférieurs, dans l'ordre décroissant.
    • Si aucune correspondance n'est trouvée, on cherche les niveaux supérieurs à 500, dans l'ordre croissant.

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.

On notera que lorsqu'on utilise des niveaux de graisse relatifs, seuls quatre niveaux sont considérés : fin (100), normal (400), gras (700) et épais (900). Si une police dispose de plus de niveaux de graisse, ceux-ci sont ignorés pour le calcul des niveaux relatifs.

Valeur héritée bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

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) (voir la spécification OpenType) :

Valeur Nom communément utilisé
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)
950 Extra Black (Ultra Black)

Polices variables

La plupart des polices possèdent des niveaux de graisses qui correspondent aux niveaux communément utilisés (voir tableau précédent). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation wght qui est utilisé afin d'implémenter les variations de largeur.

Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification CSS Fonts de niveau 4 pour laquelle font-weight peut prendre une valeur numérique entre 1 et 1000. La démonstration commence avec font-weight: 500; et vous pouvez changer la valeur pour voir l'effet sur le texte.

Accessibilité

Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec font-weight qui vaut 100 ou 200, notamment si le contraste entre le texte et l'arrière-plan est faible.

Définition formelle

Valeur initialenormal
Applicabilitéall elements and text. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Valeur calculéele mot-clé ou la valeur numérique, comme spécifié, transformé en la valeur réelle avec bolder et lighter
Type d'animationune graisse de police

Syntaxe formelle

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

Exemple

HTML

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

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

/* Le texte du div utilise plus fort que
   normal mais moins fort que standard. */
div {
  font-weight: 600;
}

/* Le texte du span utilise un niveau de graisse
   plus léger que son parent. */
span {
  font-weight: lighter;
}

Résultat

Spécifications

Specification
CSS Fonts Module Level 4
# font-weight-prop

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi