path: root/files/fr/web/css/@font-face/font-weight/index.html

---
title: font-weight
slug: Web/CSS/@font-face/font-weight
tags:
  - '@font-face'
  - CSS
  - Descripteur
  - Reference
translation_of: Web/CSS/@font-face/font-weight
---
<p>{{CSSRef}}</p>

<p>Le descripteur CSS <strong><code>font-weight</code></strong> permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété <code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code> peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).</p>

<p>Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur <code>font-weight</code> afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.</p>

<p>{{cssinfo}}</p>

<p>Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).</p>

<h2 id="Syntaxe">Syntaxe</h2>

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

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

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Le niveau de graisse normal (équivaut à la valeur numérique <code>400</code>).</dd>
 <dt><code>bold</code></dt>
 <dd>La fonte en gras (équivaut à la valeur numérique <code>700</code>).</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>Un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).</dd>
</dl>

<p>Dans les versions antérieures de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.</p>

<p>Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.</p>

<h3 id="Correspondance_entre_les_noms_et_les_valeurs_numériques">Correspondance entre les noms et les valeurs numériques</h3>

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

<table>
 <thead>
  <tr>
   <th scope="col">Valeur</th>
   <th scope="col">Nom commun</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>100</td>
   <td>Thin (Hairline)</td>
  </tr>
  <tr>
   <td>200</td>
   <td>Extra Light (Ultra Light)</td>
  </tr>
  <tr>
   <td>300</td>
   <td>Light</td>
  </tr>
  <tr>
   <td>400</td>
   <td>Normal</td>
  </tr>
  <tr>
   <td>500</td>
   <td>Medium</td>
  </tr>
  <tr>
   <td>600</td>
   <td>Semi Bold (Demi Bold)</td>
  </tr>
  <tr>
   <td>700</td>
   <td>Bold</td>
  </tr>
  <tr>
   <td>800</td>
   <td>Extra Bold (Ultra Bold)</td>
  </tr>
  <tr>
   <td>900</td>
   <td>Black (Heavy)</td>
  </tr>
 </tbody>
</table>

<h3 id="Polices_variables">Polices variables</h3>

<p>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.</p>

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

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<p>Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.</p>

<pre>@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}</pre>

<h2 id="Accessibilité">Accessibilité</h2>

<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>

<ul>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
</ul>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.at-rules.font-face.font-weight")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code></li>
 <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
 <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
 <li>{{cssxref("@font-face/font-stretch", "font-stretch descriptor")}}</li>
 <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
 <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
 <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
 <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
 <li>{{cssxref("@font-face/src", "src")}}</li>
 <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
</ul>