Utilisation de Fontello pour charger uniquement les polices d'icônes dont vous avez besoin

Fontello: Créez des polices d'icônes personnalisées légères

Fontello est un service gratuit et convivial pour la fabrication de polices d'icônes personnalisées à partir d'images vectorielles. Il rationalise le développement Web en consolidant les icônes à partir de divers projets open source (comme Font Awesome, enpepo et typicons) dans un seul fichier compact. Cela réduit considérablement les temps de chargement des pages et améliore les performances globales du site Web.

Les polices d'icônes offrent plusieurs avantages par rapport aux images standard: elles sont nettes sur les écrans haute résolution, facilement stylisées avec CSS (taille, couleur, ombres) et plus simples à gérer que les sprites d'image. Cependant, pour les nouveaux projets, les images SVG pourraient être une alternative supérieure, offrant des capacités multicolores et des visuels plus nets. Si le support du navigateur hérité ou les contraintes de flux de travail nécessitent des polices d'icônes, l'optimisation de leur utilisation est cruciale.

Le défi avec les bibliothèques de polices d'icônes populaires comme Font Awesome (version 4.7, ~ 75 Ko) est que la plupart des projets n'utilisent qu'une fraction des icônes disponibles. Le chargement de la bibliothèque entière augmente inutilement le poids de la page. Fontello résout cela en vous permettant de sélectionner uniquement les icônes nécessaires.

Création d'une police personnalisée

1. Sélection d'icônes: Choisissez vos icônes requises à la page d'accueil de Fontello.
2. Personnalisation: L'onglet "Personnaliser les noms" vous permet de renommer les icônes (par exemple, changer icon-facebook en icon-fb). Le bouton Paramètres permet la modification du préfixe (par exemple, modifiant le préfixe par défaut icon-). Vous pouvez également ajuster les codes d'icône individuels.
3. Télécharger: Une fois satisfait, téléchargez les fichiers de police générés.

Intégration de la police

1. Extraire: Extraire le fichier zip téléchargé. Vous trouverez des dossiers "CSS" "Fontts" et un fichier "config.json" (contenant la configuration de la police).
2. Importer (facultatif): Pour les projets existants, faites glisser le fichier "config.json" sur la page Fontello ou importez-le via Paramètres & gt; Import.
3. Placement des fichiers: Copiez tous les fichiers (maintien de la structure du dossier) dans votre répertoire de projet.
4. CSS Inclusion: Incluez le fichier CSS généré (par exemple, social-media.css) dans votre projet.
5. Utilisation: Utilisez des icônes dans votre balisage HTML avec le format <i class="icon-classname"></i>, en remplaçant icon-classname par le nom de l'icône.

en utilisant des images personnalisées

Bien que Fontello propose une vaste bibliothèque, vous pouvez importer des images SVG personnalisées. Assurez-vous que vos SVG sont correctement préparés: supprimez les remplissages, les couleurs, les règles complexes (comme evenodd remplissages) et les attributs de la ligne de graisse; Rejoignez les contours en contours uniques.

gains de performance

Fontello réduit considérablement la taille du fichier. Dans un exemple, un fichier de 4,7 génial de police (75 Ko) a été réduit à un fichier Fontello de 4KB (en utilisant huit icônes). Les économies varient en fonction du nombre d'icônes utilisées. Cela minimise les demandes HTTP et améliore la vitesse de chargement. De plus, Fontello permet un préfixe d'icône cohérent sur plusieurs polices, simplifiant la gestion.

Configuration avancée

• En-têtes CORS: Si l'hébergement des fichiers de police sur un domaine séparé, configurez les en-têtes CORS dans votre fichier .htaccess:

<code class="language-htaccess"><filesmatch>
  Header set Access-Control-Allow-Origin "*"
</filesmatch></code>

• Types de mime de police: Définissez les types de mime corrects dans votre .htaccess:

<code class="language-htaccess">AddType application/x-font-ttf           ttc ttf
AddType application/x-font-otf           otf
AddType application/font-woff            woff
AddType application/font-woff2           woff2
AddType application/vnd.ms-fontobject    eot</code>

Conclusion

Fontello simplifie la création de polices d'icônes légères et personnalisées. Même les réductions apparemment de la taille des fichiers s'accumulent pour améliorer considérablement les performances du site Web. Considérez son utilisation pour optimiser votre flux de travail de police d'icône.

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!