Maison > interface Web > tutoriel HTML > Comment convertir de petites images SVG en graphiques de polices HTML

Comment convertir de petites images SVG en graphiques de polices HTML

高洛峰
Libérer: 2017-02-17 13:29:12
original
1708 Les gens l'ont consulté

Cas d'utilisation d'un graphique de polices simple créé : voir la démo

Étapes de production :

1 : Connectez-vous au site Web en ligne de l'outil de production

https://icomoon .io/

2 : Le bouton rouge 如何把SVG小图片转换为  html字体图表

dans le coin supérieur droit va à : https://icomoon.io/app/#/select

3 : Cliquez sur le coin supérieur gauche : importe les icônes

如何把SVG小图片转换为  html字体图表

pour importer votre propre image svg, qui sera ensuite téléchargée sur le site Web en ligne

4 : Cliquez pour sélectionner celui que vous venez de télécharger. Le petit tableau est le suivant :

如何把SVG小图片转换为  html字体图表

5 : Après la sélection, cliquez sur le 如何把SVG小图片转换为  html字体图表

bouton dans le coin inférieur droit pour générer automatiquement le tableau des polices

如何把SVG小图片转换为  html字体图表

Vous pouvez introduire les polices et CSS correspondants pour utiliser la classe spécifiée par l'élément comme suit. . N'est-ce pas incroyable ~~

如何把SVG小图片转换为  html字体图表

6 : Le 如何把SVG小图片转换为  html字体图表 dans le coin supérieur gauche est le paramètre de base pour générer le graphique de polices. Après le réglage, vous pouvez cliquer sur le.

Bouton de téléchargement pour télécharger le tableau des polices que vous venez de créer. Après la décompression, il y aura les polices et les fichiers CSS correspondants. 如何把SVG小图片转换为  html字体图表

De cette façon, vous pouvez modifier de manière flexible la taille et la couleur de la police, ce qui est bien plus pratique que d'utiliser directement des images !

Pour plus d'articles sur la façon de convertir de petites images SVG en graphiques de polices HTML, veuillez faire attention au site Web PHP 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