Maison >interface Web >tutoriel CSS >Comment obtenir un effet de rendu d'anticrénelage de police en CSS3 ? Propriété -webkit-font-smoothing (exemple)

Comment obtenir un effet de rendu d'anticrénelage de police en CSS3 ? Propriété -webkit-font-smoothing (exemple)

青灯夜游
青灯夜游original
2018-09-13 15:19:392123parcourir

Ce chapitre vous présenteraComment obtenir un effet de rendu d'anti-aliasing de police en CSS3 ? -webkit-font-smoothing (exemple) , a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Le rendu anti-aliasé des polices peut rendre les polices plus claires et plus confortables. Aujourd’hui, alors que les polices d’icônes deviennent une tendance, le rendu anti-aliasé est de plus en plus utilisé.

font-smoothing est une définition CSS non standard. Il a été inclus dans le projet de spécification standard, mais a ensuite été supprimé de la norme Web pour une raison quelconque.

Cependant, nous pouvons utiliser les deux définitions suivantes pour le rendu anti-aliasé :

-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/

1. Webkit prend en charge cet effet dans son propre moteur.

-webkit-font-smoothing Il a trois valeurs d'attribut :

1) aucune : mieux pour le texte à faible pixel

2) sous-pixel - antialiased : Valeur par défaut

3) antialiased : l'antialiasing est très bon

Exemple :

body{
   -webkit-font-smoothing: antialiased;
}

Cet attribut peut rendre la police de la page anti-aliasée, en utilisant la police après, cela paraîtra plus clair. Après l'avoir ajouté, la page semblait soudainement plus petite et plus claire.

2. Gecko a également lancé sa propre définition non standard de l'effet anti-aliasing.

-moz-osx-font-smoothing : hériter | niveaux de gris ;Cet attribut a également un effet plus clair.

Exemple :

.icon {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

3 Le framework Ionic ajoute un lissage de police supplémentaire : antialiased ;

Ceci. attend que le lissage des polices soit standardisé, vous êtes donc prêt.

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!

Déclaration:
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