Maison > interface Web > tutoriel CSS > Explication détaillée des exemples de rendu de lissage des polices et d'anticrénelage en CSS3

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

高洛峰
Libérer: 2017-03-31 10:18:58
original
2121 Les gens l'ont consulté

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 :

<.>

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

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

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

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal