font-weight

Syntaxe

/* Valeurs simples */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Valeurs multiples */
font-weight: normal bold;
font-weight: 300 500;

Valeurs

Le descripteur font-weight accepte l'une des formes suivantes :

• Le mot-clé auto.
• Une seule valeur <font-weight-absolute>.
• Une paire de valeurs <font-weight-absolute>, séparées par un espace.

Chaque <font-weight-absolute> peut être l'une des valeurs suivantes :

normal

Graisse normale. Équivalent à 400.

bold

Graisse grasse. Équivalent à 700.

<number>

Une valeur <number> comprise entre 1 et 1000 inclus. Les nombres plus élevés représentent des graisses plus épaisses (ou aussi épaisses) que les nombres plus faibles. Certaines valeurs courantes correspondent à des noms de graisses communs, comme décrit dans la section Correspondance entre les noms et les valeurs numériques ci-dessous.

Correspondance entre les noms et les valeurs numériques

Les valeurs numériques entre 100 et 900 correspondent (approximativement) à ces noms communément utilisés :

Polices variables

La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.

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

Définition formelle

Syntaxe formelle

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

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

Exemples

Sélectionner les polices normales et grasses

Dans cet exemple, nous incluons deux polices, une de graisse normale et une de graisse grasse, de la famille de polices « Fira Sans » en utilisant deux règles @font-face. Nous définissons les descripteurs font-weight pour correspondre à la graisse des polices.

Ensuite, les règles CSS peuvent sélectionner la police normale ou la police grasse pour la famille « Fira Sans » simplement en définissant la propriété font-weight. Notez que l'élément HTML <strong> sélectionne également la police grasse, car par défaut les éléments <strong> ont une valeur de propriété CSS font-weight à bold.

HTML

<p class="one">Fira Sans, paragraphe de graisse `normal`</p>
<p class="two">Fira Sans, paragraphe de graisse `bold`</p>
<p><strong>Fira Sans, élément &lt;strong&gt; (`bold`)</strong></p>

CSS

@font-face {
  font-family: "Fira Sans";
  font-weight: normal;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: bold;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

Résultat

Définir des plages de font-weight

Cet exemple montre comment inclure plusieurs polices pour différentes graisses (et styles), en incluant plusieurs déclarations @font-face avec la même valeur de font-family. En définissant les descripteurs font-weight avec des plages de 1 à 1000, dans le reste de vos feuilles de style, vous pouvez déclarer une valeur de font-weight (ou de font-style), et être assuré·e que la police appropriée sera utilisée.

HTML

<p class="one">Cette police a une graisse de 100</p>
<p class="three">Cette police a une graisse de 300</p>
<p class="four">Cette police a une graisse de 400</p>
<p class="five">Cette police a une graisse de 500</p>
<p class="seven">Cette police a une graisse de 700</p>
<p class="nine">Cette police a une graisse de 900</p>

CSS

Nous incluons quatre déclarations @font-face pour quatre polices différentes de la famille Fira Sans, comme dans l'exemple précédent. Chaque déclaration est associée à une plage différente de valeurs de font-weight, mais toutes utilisent le même nom de police.

La première déclaration utilise FiraSans-Regular et sa plage de font-weight couvre toute la plage possible.

Les trois autres déclarations utilisent les versions light, bold et extra-bold de la police, et leurs plages de font-weight définissent des sous-ensembles de la plage comme suit :

• la police light est associée à la plage 1-300
• la police bold à la plage 500-700
• la police extra-bold à la plage 700-1000

La cascade CSS garantit que les trois dernières déclarations remplacent les parties de la plage définies dans la déclaration FiraSans-Regular.

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 300;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 500 700;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 700 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: 100;
}

p.three {
  font-weight: 300;
}

p.four {
  font-weight: 400;
}

p.five {
  font-weight: 500;
}

p.seven {
  font-weight: 700;
}

p.nine {
  font-weight: 900;
}

Résultat

Le paragraphe seven utilise la police extra-bold. Bien que font-weight: 700 corresponde aux déclarations FiraSans-Bold et FiraSans-ExtraBold, comme FiraSans-ExtraBold est déclarée plus tard, elle remplace FiraSans-Bold pour cette valeur.

De même, les valeurs 100 et 300 utilisent la police light ; bien que FiraSans-Regular et FiraSans-Light incluent 300 dans leurs plages, FiraSans-Light est déclarée plus tard. On pourrait aussi déclarer FiraSans-Regular après FiraSans-Light, mais il faudrait alors modifier la plage du descripteur font-weight.

Définir une plage pour une police variable

Dans cet exemple, nous utilisons le descripteur font-weight pour restreindre la plage de graisses utilisables avec une police variable.

Nous incluons une police variable, « League Mono », via une seule règle @font-face. Nous utilisons la valeur font-weight: 300 700 pour limiter effectivement la plage de graisses disponibles. Si une règle CSS utilise notre police « League Mono », alors si elle spécifie une graisse hors de cette plage, la valeur sera ramenée dans la plage.

HTML

Nous incluons un paragraphe avec <output> initialisé à 400, valeur par défaut pour le texte non stylisé. Ce paragraphe est placé entre deux autres, pour comparer le rendu des graisses.

Nous incluons un <input/range> de type range, dans un <label>, avec un step à 50.

<p>LeagueMono, font-weight: 300 (comparaison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (exemple)</p>
<p>LeagueMono, font-weight: 700 (comparaison)</p>
<label
  >Changer la graisse&nbsp;:
  <input type="range" min="50" max="1000" step="50" value="400" />
</label>

CSS

Nous définissons la plage du descripteur font-weight à 300 700, ce qui limite la police variable à cette plage.

@font-face {
  font-family: LeagueMono;
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-weight: 300 700;
}

p {
  font-family: LeagueMono, serif;
  font-size: 1.5rem;
}

p:first-of-type {
  font-weight: 300;
}

p:last-of-type {
  font-weight: 700;
}

JavaScript

Nous incluons un gestionnaire d'événement qui met à jour la propriété font-weight du paragraphe et le texte affiché :

const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");

range.addEventListener("change", () => {
  text.style.fontWeight = range.value;
  log.innerText = range.value;
});

Résultat

Changez la graisse du paragraphe via le curseur. Notez que le paragraphe exemple n'est pas plus fin que le paragraphe 300 au-dessus ni plus gras que le paragraphe 700 en dessous : la graisse est limitée à la plage définie par le descripteur font-weight.

Spécifications

Compatibilité des navigateurs

Voir aussi

• font-display
• font-family
• font-stretch
• font-style
• font-feature-settings
• font-variation-settings
• src
• Le descripteur unicode-range