Comment définir le lissage des polices en CSS

En CSS, vous pouvez utiliser l'attribut "-webkit-font-smoothing" pour définir le lissage des polices, la syntaxe est "-webkit-font-smoothing:subpixel-antialiased" ; la page anti-aliasée, elle paraîtra plus claire et plus confortable.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

En parcourant le thème officiel Drupal, j'ai découvert un sélecteur CSS non standard intéressant -webkit-font-smoothing, j'ai donc commencé à jouer avec. Comment utiliser les polices CSS3 pour un affichage fluide

Il faut savoir que le W3C a envisagé le rendu anti-aliasing des polices en CSS, comme font-smooth, mais cela peut être dû au rendu des polices par différents systèmes d'exploitation et les noyaux des navigateurs. Il existe des différences et, en bref, il n'a pas été sélectionné dans un standard Web. Cependant, WebKit conserve toujours un ensemble de ses propres sélecteurs non standard pour prendre en charge les effets d'anticrénelage afin de rendre l'affichage des polices plus fluide.

-webkit-font-smoothing a principalement les trois attributs suivants :

• aucun : pas d'anti-aliasing

• sous-pixel - anticrénelé (par défaut) : le lissage des sous-pixels est couramment utilisé sous Mac OS et MacType pour Windows

• anticrénelé : le lissage des niveaux de gris est couramment utilisé dans les appareils mobiles tels qu'Android et iOS

Mais après l’avoir essayé, mes yeux en bois ne peuvent pas du tout faire la différence entre les deux derniers. Et ce CSS non standard n'est applicable qu'à la plupart des navigateurs mobiles et des navigateurs de bureau dotés du noyau WebKit, tels que Safari et Chrome. Quant à la série IE, vous ne la supportez pas vous-même, blâmez-moi ~

Jetons un coup d'œil à l'effet réel ici Tout d'abord, elle n'utilise pas le rendu anti-aliasing :

<.>

Voici ensuite l'effet après avoir utilisé -webkit-font-smoothing : lissage du rendu anti-aliasing avec anticrénelage sous-pixel :

Il peut on voit que la douceur des bords de la police est toujours différente. Oui, elle est bien meilleure après l'avoir ajoutée.

Après des tests, il a été constaté que l'anticrénelage des polices est généralement inclus dans les propriétés de base intégrées des navigateurs. Mais par mesure de sécurité, ajoutons-en un manuellement~

Apprentissage recommandé :

Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!