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.

Syntaxe

/* 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: 1;
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

/* Valeurs globales */
font-weight: inherit;
font-weight: initial;
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.

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 bold100-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 :

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) :

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)

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.

Polices variables

La plupart des polices possèdent des niveaux de graisses qui correspondent aux niveaux communément utilisés. 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.

HTML

<div class="container">
  <input type="range" id="weight" name="weight" min="0" max="1000" />
  <label for="weight">Weight</label>
  <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
</div>

CSS

/*
Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
and is used here under the terms of its license:
https://github.com/LettError/mutatorSans/blob/master/LICENSE
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
  font-family:'MutatorSans';
  font-style: normal;
}

.container {
  font: 1rem 'Open Sans', sans-serif;
  border: 10px solid #f5f9fa;
  padding: .5rem;
}

.sample {
  text-transform: uppercase;
  font: 1.5rem 'MutatorSans', sans-serif;
  border: 1px solid silver;
  padding: .5rem;
}

JavaScript

let weightLabel = document.querySelector('label[for="weight"]');
let weightInput = document.querySelector('#weight');
let sampleText = document.querySelector('.sample');

function update() {
  weightLabel.textContent = `Weight: ${weightInput.value}`;
  sampleText.style.fontWeight = weightInput.value;
}

weightInput.addEventListener('input', update);

update();

Syntaxe formelle

<font-weight-absolute> | bolder | lighter


<font-weight-absolute> = normal | bold | <number>

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

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.

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'font-weight' dans cette spécification.
Version de travail Définition de font-weight qui précise que la propriété peut utiliser des valeurs comprises entre 1 et 1000.
CSS Fonts Module Level 3
La définition de 'font-weight' dans cette spécification.
Candidat au statut de recommandation Aucun changement.
CSS Transitions
La définition de 'font-weight' dans cette spécification.
Version de travail font-weight peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'font-weight' dans cette spécification.
Recommendation Aucun changement.
CSS Level 1
La définition de 'font-weight' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
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
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple212133.51.3
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple1 Oui Oui463.1 Oui

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, ygarbage, fscholz, Sebastianz, teoli, tregagnon, FredB, Mgjbot, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,