font-synthesis

Baseline Widely available

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

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

css

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;

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

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.

Syntaxe

Cette propriété peut prendre l'une des formes suivantes :

le mot-clé none
le mot-clé weight ou le mot-clé style
la valeur weight style

Valeurs

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

Définition formelle

Valeur initiale	`weight style small-caps position`
Applicabilité	all elements and text. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

font-synthesis = 
  none                                           |
  [ weight || style || small-caps || position ]

Exemples

HTML

html

<div class="syn">Ne me synthétisez pas !</div>

CSS

css

.syn {
  font-synthesis: none;
}

Résultat

Spécifications

Specification
CSS Fonts Module Level 4 # font-synthesis

Compatibilité des navigateurs

BCD tables only load in the browser