La font-systhesispropriété en CSS donne au navigateur des instructions sur la façon de gérer les caractères en gras et en italique lorsque le spécifié font-familyne les inclut pas.
Prenons l'exemple de Lato de Google Fonts. Il dit qu'il existe 10 variantes différentes de la police.
Chacune de ces variations de police est techniquement un fichier de police différent. Si nous voulons utiliser certains poids et styles, nous lierons ces fichiers afin que le navigateur ait quelque chose à charger.
Mais toutes les polices n'incluent pas de fichiers pour gérer le poids et le style. Dans ces cas, le navigateur «synthétisera» l'apparence elle-même. Le navigateur fait de son mieux, mais les faux gras et le style rendent parfois le texte moins lisible; c'est-à-dire moins lisible qu'une version vraiment conçue. Dans le plus léger des cas, nous pouvons voir des caractères se chevaucher. Dans les cas plus graves, le texte est complètement illisible ou peut même changer le sens - comme cela pourrait arriver avec des langues comme le chinois, le japonais, le coréen et d'autres écritures logographiques.
C'est là font-synthesisqu'intervient. Il contrôle les polices que le navigateur est autorisé à synthétiser.
Syntaxe
.element ( font-synthesis: none | ( weight || style ); )En clair, cela signifie font-synthesisaccepter:
- une valeur de
none - soit
weightoustyle - à la fois
weightetstyle
Il est à noter que font-synthesisc'est considéré comme une propriété sténographique. Selon la spécification, c'est une combinaison de font-synthesis-weightet font-synthesis-styleoù les deux acceptent les valeurs de autoou none. Puisqu'il est possible d'obtenir le même effet en utilisant la sténographie, c'est probablement la meilleure façon de procéder.
Valeurs
none: Ni gras ni oblique ne peuvent être synthétisésweight: Le gras peut être synthétisé par le navigateurstyle: Oblique peut être synthétisé par le navigateur
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */Usage
font-synthesispeut être utilisé avec tous les éléments, y compris les ::first-letteret ::first-linepseudo-éléments.
Il peut y avoir des cas où ne pas permettre au navigateur de synthétiser des caractères gras et obliques sur une langue entière a du sens car l'un ou l'autre peut obscurcir les caractères. Voici un exemple tiré de la spécification qui désactive les polices synthétisées en gras et obliques contenant des caractères arabes:
/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )Démo
Prise en charge du navigateur
Au moment de la rédaction de cet article, caniuse rapporte une couverture mondiale de 20,21% pour la font-synthesispropriété.
Bureau
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | Non | 34+ | Non | 9+ | Non |
Mobile
| Safari sur iOS | Opera Mini | Navigateur Android | Chrome pour Android | Firefox pour Android |
|---|---|---|---|---|
| 9+ | Tout | Non | Non | 68 |
Vous souhaitez utiliser font-synthesisdans le courrier électronique? Campaign Monitor signale qu'il est pris en charge par les clients suivants:
- Apple Mail 10+
- Outlook pour Mac
- Application iOS AOL Alto
- Messagerie iOS 10+
- moineau
- G Suite
- Gmail
- Boîte de réception Google
Plus d'information
- Spécification de niveau 4 du module de polices CSS
- "Test CSS3:
font-synthesis" par Eric Meyer - «Comment mettre du texte en italique» par Chris Coyier