font-synthesis-position
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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
/* 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
Définition formelle
| Valeur initiale | none |
|---|---|
| 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-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
<p>
Ce sont les variantes de position par défaut :
<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
@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;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-synthesis-position |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
font-synthesiset les propriétésfont-synthesis-style,font-synthesis-weight - Les propriétés
font-style,font-variant,font-variant-position,font-weight