Explication détaillée de l'utilisation d'iconfont en CSS

Ce tutoriel explique en détail l'utilisation d'iconfont en CSS

Première introduction à iconfont

Même si on ne comprend pas cet anglais au début et qu'on ne comprend pas à quoi il sert , pour iconfont, l'anglais se fait de l'arrière vers l'avant. La lecture 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.

Il existe également le dernier mot iconfont, qui n'apparaît pas au début. Il s'agit d'une couche de présentation donnée par les créateurs de pages Web ou les universitaires qui souhaitent le rendre plus agréable.

Ainsi, lorsque nous voyons le didacticiel sur les icônes de police d'Alibaba, il est le suivant :

Étape 1 : Utilisez font-face pour déclarer la police

@font-face {font-family : 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), / * IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), / * chrome, firefox, opera, Safari, Android, iOS 4.2 */
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

Étape 2 : Définissez le style en utilisant iconfont

.iconfont{
font-family:"iconfont" !important;
-webkit-font-smoothing : anticrénelé ;
-webkit-text-stroke-width : 0,2px
-moz-osx-font-smoothing : niveaux de gris ;>

Étape 3 : Sélectionnez l'icône correspondante et obtenez l'encodage de la police, appliquez-le à la page

#x33

L'effet est le suivant

Cependant, Iconfont présente certains inconvénients :

Le navigateur le traite comme du texte pour l'optimisation de l'anti-aliasing, et parfois l'effet n'est pas aussi net qu'on l'imaginait. En particulier, différents algorithmes d'anticrénelage pour le texte sous différents systèmes peuvent conduire à des effets d'affichage différents.

Police des icônes En tant que police, la taille et la position de l'affichage des icônes peuvent être affectées par les propriétés CSS telles que la taille de la police, la hauteur de la ligne, l'espacement des mots, etc. Le style CSS du conteneur dans lequel se trouve l'icône peut affecter la position de l'icône, ce qui la rend peu pratique à ajuster.
Il y a des inconvénients d'utilisation. Premièrement, charger une police d’icônes contenant des centaines d’icônes mais n’en utiliser que quelques-unes fait perdre du temps à le chargement. Il est également très gênant de créer votre propre police d'icônes et d'intégrer les icônes utilisées dans plusieurs polices d'icônes dans une seule police. Bien entendu, l'utilisation de la bibliothèque d'icônes vectorielles Alibaba UX peut résoudre ce problème
Afin d'obtenir une prise en charge maximale du navigateur, au moins quatre types différents de fichiers de polices peuvent être fournis. Comprend TTF, WOFF, EOT et une police définie au format SVG. Si vous le faites vous-même, vous pourriez avoir mal à la tête

Ce qui précède est l'explication détaillée de l'utilisation d'iconfont en CSS. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). )!