font-synthesis-small-caps
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2023.
La propriété CSS font-synthesis-small-caps permet de définir si le navigateur peut synthétiser la variante petite capitale lorsqu'elle n'est pas définie dans la famille de polices. Les glyphes en petites capitales utilisent généralement la forme des lettres majuscules mais sont réduits à la taille des lettres minuscules.
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-small-caps: auto;
font-synthesis-small-caps: none;
/* Valeurs globales */
font-synthesis-small-caps: inherit;
font-synthesis-small-caps: initial;
font-synthesis-small-caps: revert;
font-synthesis-small-caps: revert-layer;
font-synthesis-small-caps: unset;
Valeurs
Définition formelle
| Valeur initiale | auto |
|---|---|
| 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-small-caps =
auto |
none
Exemples
Désactiver la synthèse de la variante petite capitale
Cet exemple montre comment désactiver la synthèse de la variante petite capitale par le navigateur pour la police Montserrat.
HTML
<p class="english">
Ce sont les variantes par défaut :
<span class="small-caps">petite capitale</span>, <strong>grasse</strong> et
<em>oblique</em>.
</p>
<p class="english no-syn">
La variante <span class="small-caps">petite capitale</span> est désactivée
ici, mais pas les variantes <strong>grasse</strong> et <em>oblique</em>.
</p>
CSS
@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";
.english {
font-family: "Montserrat", sans-serif;
}
.small-caps {
font-variant: small-caps;
}
.no-syn {
font-synthesis-small-caps: none;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-synthesis-small-caps |
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-caps,font-weight - CanvasRenderingContext2D : propriété fontVariantCaps