font-smooth
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La propriété CSS font-smooth permet de contrôler l'application d'algorithmes anti-crénelage (anti-aliasing en anglais) sur le rendu des fontes de caractères.
Syntaxe
/* Valeurs avec mot-clé */
font-smooth: auto;
font-smooth: never;
font-smooth: always;
/* Valeurs de type <length> */
font-smooth: 2em;
/* Valeurs globales */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;
Note :
WebKit implémente une propriété similaire, mais avec des valeurs différentes : -webkit-font-smoothing. Elle ne fonctionne que sur macOS.
auto— c'est le navigateur qui décide la meilleure approche (Utilise l'anti-crénelage par sous-pixels lorsque disponible ; c'est la valeur par défaut).none— l'anti-crénelage est désactivé.antialiased— lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.subpixel-antialiased— sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.
Note :
Firefox implémente une propriété similaire, mais avec des valeurs différentes : -moz-osx-font-smoothing. Elle ne fonctionne que sur macOS.
auto— le choix est laissé au navigateur. Cela correspond généralement àgrayscale.grayscale— On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
font-smooth =
auto |
never |
always |
<absolute-size> |
<length>
<absolute-size> =
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large |
xxx-large
Exemples
Exemple d'utilisation simple
L'exemple suivant montre les équivalents Safari/Chromium et Firefox qui activent le lissage des fontes sur macOS. Dans les deux cas, la fonte lissée devrait paraître légèrement plus fine.
Pour celles et ceux qui ne sont pas sur macOS, voici une capture d'écran (la version interactive apparaît plus bas) :
HTML
<p>Sans lissage des fontes</p>
<p class="smoothed">Avec lissage des fontes</p>
CSS
html {
background-color: black;
color: white;
font-size: 3rem;
}
p {
text-align: center;
}
.smoothed {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Résultat
Spécifications
Ne fait partie d'aucun standard.
Compatibilité des navigateurs
Voir aussi
- Il faut arrêter de vouloir « réparer » le lissage des fontes (angl.) par Dmitry Fadeyev (2012)
- Laissez-faire sur le lissage des fontes et l'anti-crénelage (angl.) par Zach Leatherman (2017)
- Améliorer le rendu du texte (Une remise à zéro moderne de CSS) (angl.) par Josh W. Comeau (2021)
- Que se passe-t-il avec le lissage des fontes WebKit ? (angl.) par David Bushell (2024)