Maison > interface Web > tutoriel CSS > le corps du texte

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

青灯夜游
Libérer: 2018-09-13 15:19:39
original
2076 Les gens l'ont consulté

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*/
Copier après la connexion

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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!

É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