Propriété CSS `font-synthesis-position`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more browser support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété CSS font-synthesis-position permet de définir si le navigateur peut synthétiser les variantes de « position » d'indice et d'exposant lorsqu'elles ne sont pas définies dans la famille de polices, lors de l'utilisation de font-variant-position pour définir les positions.

La propriété font-synthesis-position n'a aucun effet lors de l'utilisation des éléments HTML <sup> et <sub>.

Il est souvent pratique d'utiliser la propriété raccourcie font-synthesis pour contrôler toutes les valeurs de synthèse de police.

Syntaxe

css

/* Valeurs avec un mot-clé */
font-synthesis-position: auto;
font-synthesis-position: none;

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

Valeurs

auto: Indique que la variante de position manquante peut être synthétisée par le navigateur si besoin.
none: Indique que la synthèse d'une variante de position manquante par le navigateur n'est pas autorisée.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments et le texte. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

font-synthesis-position = 
  auto  |
  none

Exemples

Désactiver la synthèse des variantes de position

Cet exemple montre comment désactiver la synthèse des variantes d'exposant et d'indice par le navigateur pour la police Montserrat.

HTML

html

<p>
  Ce sont les variantes de position par défaut&nbsp;:
  <span class="super">exposant</span>, <span class="sub">indice</span>,
  <strong>grasse</strong> et <em>oblique</em>.
</p>

<p class="no-syn">
  Les variantes <span class="super">exposant</span> et
  <span class="sub">indice</span> sont désactivées ici, mais pas les variantes
  <strong>grasse</strong> et <em>oblique</em> (sur les navigateurs qui prennent
  en charge <code>font-synthesis-position</code>).
</p>

CSS

css

@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";

* {
  font-family: "Montserrat", sans-serif;
}
.super {
  font-variant-position: super;
}
.sub {
  font-variant-position: sub;
}
.no-syn {
  font-synthesis-position: none;
}