---
title: font-synthesis
slug: Web/CSS/font-synthesis
tags:
  - CSS
  - CSS Fonts
  - Fontes CSS
  - Propriété
  - Reference
  - 'recipe: css-property'
translation_of: Web/CSS/font-synthesis
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>font-synthesis</code></strong> indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.</p>

<pre class="brush:css notranslate">font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;

/* Valeurs globales */
font-synthesis: initial;
font-synthesis: inherit;
font-synthesis: unset;
</pre>

<p>La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.</p>

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

<p>Cette propriété peut prendre l'une des formes suivantes :</p>

<ul>
 <li>le mot-clé <code>none</code></li>
 <li>le mot-clé <code>weight</code> ou le mot-clé <code>style</code></li>
 <li>la valeur <code>weight style</code></li>
</ul>

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

<dl>
 <dt><code>none</code></dt>
 <dd>Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.</dd>
 <dt><code>weight</code></dt>
 <dd>Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.</dd>
 <dt><code>style</code></dt>
 <dd>Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.</dd>
</dl>

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

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div class="syn"&gt;Ne me synthétisez pas !&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">.syn {font-synthesis: none;}
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples')}}</p>

<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('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

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

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

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

<p>{{Compat("css.properties.font-synthesis")}}</p>