Explication détaillée des exemples de rendu de lissage des polices et d'anticrénelage en CSS3

Cet article présente principalement le lissage des polices et le rendu anti-aliasing en CSS3. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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 :

1. aucun : pas d'anticrénelage

2. anticrénelage des sous-pixels (par défaut) : le lissage des sous-pixels est courant sur. Mac OS et MacType pour Windows

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

Cependant, après avoir essayé, mes yeux en bois ne peuvent pas 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, il n'est pas rendu avec l'anti-aliasing :

<.>

Vient ensuite l'effet après avoir utilisé le

lissage du rendu anti-aliasing : -webkit-font-smoothing: subpixel-antialiased

On peut voir que la douceur du les bords de la police sont toujours différents, et cela semble vraiment bien après l'avoir ajouté beaucoup.

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-le manuellement~

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!