Qu’est-ce qu’une police d’icônes ? Résumé de l'utilisation de l'instance iconfont en CSS

icôneQu'est-ce que la police ?

Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS devrait être une technologie relativement mature aujourd'hui. Si IconFont est en panne, il s'agit d'Icon et Font. Je suppose que tout le monde devrait pouvoir comprendre de quoi il s'agit. Qu'en est-il de la combinaison des deux ? C'est vrai, c'est IconFont ~. Utilisez des outils de polices pour convertir les icônes graphiques (icônes) que nous utilisons habituellement sur le Web en polices Web, qui deviennent des polices d'icônes. Elles peuvent être intégrées dans des pages Web à l'aide de CSS @font-face pour afficher des icônes. Étant donné que les polices sont des graphiques vectoriels, elles sont intrinsèquement « indépendantes de la résolution » et peuvent être parfaitement mises à l'échelle à n'importe quelle résolution et PPI. Elles ne seront pas aliasées après l'agrandissement comme les bitmaps traditionnels tels que png et jpeg ou le flou. L'article suivant est destiné à parler de l'utilisation d'exemples de polices d'icônes.

Utilisation des instances d'Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS

1. Qu'est-ce qu'Iconfont ? Présentation des avantages et des utilisations d'Iconfont

Quels sont les avantages d'Iconfont ?

Changez librement la taille

Modifiez librement la couleur

Vous pouvez ajouter des effets visuels tels que : ombre, rotation, transparence.

Compatible avec IE6

Les points ci-dessus annulent complètement l'icône d'origine. L'inconvénient est que la couleur est trop monotone et est une couleur unie.

L'image ci-dessous fait partie du contenu du fichier CSS de font-awesome. D'après le nom, elle ressemble à la définition de l'icône, mais quel est exactement le contenu de f002 et f003 ? Vous comprendrez après avoir ouvert le fichier de police téléchargé à l’aide d’un logiciel d’édition de polices.

2. Explication détaillée des icônes de police Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS et de diverses petites icônes CSS

Habituellement, nous les mettons les graphiques sont découpés en graphiques de sprites (également appelés graphiques de sprites)

Le principe des graphiques de sprites : combinez plusieurs petites images en une grande image, puis affichez l'image en définissant la position de l'image d'arrière-plan

Avantages des sprites : réduisez le nombre de requêtes du serveur et réduisez la pression du serveur ;

les sprites sont un bon outil pour créer des sprites

Bien sûr, il existe d'autres façons de les créer ; les petits graphiques, comme l'icône de police Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS utilisée par Tmall dans l'image ci-dessus ;

L'icône de police, comme son nom l'indique, est une police Comme la police, c'est un vecteur. icône. Vous pouvez l'agrandir à volonté Peu importe sa taille, il n'y aura pas de distorsion

3

Explication détaillée de l'utilisation d'Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS en CSS

. Même si nous ne comprenons pas cet anglais au début et ne comprenons pas ce qu'il fait, pour Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS , lu de l'arrière vers l'avant en anglais, il devrait s'appeler : font icon. Celui-ci contient déjà deux concepts : d’abord, il doit s’agir de la police et, deuxièmement, de l’icône. Nous savons tous que nous pouvons contrôler la taille, le style, la déformation, l'étirement, la police par défaut et d'autres attributs des polices sur les pages Web, donc cette police d'icônes doit être intégrée dans le style sous forme de texte, donc la police qui nous vient à l'esprit doit l'être ; c'est une icône, il faut qu'il y ait un chemin pour l'introduire. Tout d'abord, nous avons d'abord pensé à la balise img Puisqu'il s'agit à la fois de texte et d'icône, la seule chose à laquelle nous pouvons penser est l'attribut @font-facecss3.

4.

Qu’est-ce qu’une police d’icônes ? Résumé de lutilisation de linstance iconfont en CSS-Utilisation de la police d'icônes vectorielles

L'utilisation de la police d'icônes pour générer des icônes présente les avantages suivants par rapport aux icônes basées sur des images :

1.) Librement changez la taille
2.) Modifiez librement la couleur
3.) Ajoutez des effets d'ombre
4.) IE6 peut également prendre en charge
5.) Prend en charge d'autres attributs des icônes d'image, tels que la transparence et rotation, etc.
6.) Vous pouvez ajouter des attributs tels que text-stroke et background-clip:text, tant que le navigateur le prend en charge

5

Production de police d'icône (IconFont).

Les polices d'icônes (IconFont) sont désormais de plus en plus largement utilisées, améliorant considérablement la diversité des pages Web et résolvant le problème de distorsion de l'écran rétinien. On dit que cette méthode privée (@font-face) a été prise en charge par Microsoft à partir d'IE4. Plus tard, W3 a également introduit cette méthode dans CSS2, mais elle a ensuite été supprimée dans CSS2.1, ce qui est vraiment dommage. Jusqu'à CSS3, lorsqu'il a été réintroduit, c'était une très bonne nouvelle.

Questions et réponses connexes

1 L'utilisation de la police d'icônes Alibaba ne s'affiche pas dans Android WeChat et s'affiche sous iOS

<.> 2.

Développez la bibliothèque de polices d'icônes d'Alibaba dans les projets locaux et ajoutez des polices d'icônes

3.

Problèmes de production d'icônes d'icônes

[Recommandations associées]

1. Tutoriel gratuit sur le site Web php chinois :

"Manuel CSS en ligne"

2. Tutoriel vidéo gratuit sur le site Web php chinois :

"php.cn Dugu Jiujian (2)-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!