web-dev-qa-db-fra.com

Comment convertir des fichiers .svg à une police?

Quelqu'un peut-il m'aider à convertir des fichiers .svg en un fichier de police? ou existe-t-il un moyen de le faire à la volée?

28
Shoaib Ud-Din

J'ai trouvé deux réponses pertinentes ici sur Stack Overflow:

  1. Création de polices d'icônes avec un logiciel vectoriel (par exemple inkscape) et fontforge?
  2. Outils pour convertir svg en ttf [fermé]

Malheureusement, ni l'un ni l'autre n'est vraiment une réponse de codage , ce que j'avais vraiment espéré (un utilitaire de ligne de commande pour la conversion scriptée ou peut-être une API avec laquelle quelqu'un pourrait écrire une telle chose).

Pourtant, j'ai obtenu ce que je cherchais en combinant ces deux réponses.

Nettoyer SVG

(Cette étape peut être facultative.) Ouvrez votre SVG dans le logiciel gratuit InkScape . Copiez le SVG existant et créez un nouveau projet à partir du modèle FontForge Glyph. Collez-le dans ce modèle, normalisez l'apparence, la taille et la position, puis enregistrez au format SVG PLAIN, un fichier par caractère ("glyphe").

Convertir SVG en police

Ensuite, utilisez le logiciel gratuit FontForge directement (comme indiqué dans la première réponse, création de polices d'icônes avec un logiciel vectoriel ) ou bien utilisez le libre IcoMoon service en ligne (comme indiqué dans la deuxième réponse, outils pour convertir svg en ttf ). J'ai fait ce dernier.

Utiliser IcoMoon

IcoMoon est un outil plutôt simple. Cliquez sur le bouton violet Importer des icônes en haut de la page pour importer chacun de vos glyphes SVG personnalisés. Cliquez ensuite sur "Obtenir des informations" dans les préférences de l'ensemble afin de pouvoir nommer l'ensemble et lui donner des métadonnées. Utilisez l'outil "Modifier" (l'icône du crayon) et cliquez sur chaque glyphe pour obtenir le bon dimensionnement et l'espacement.

Lorsque vous avez terminé, sélectionnez tous les glyphes que vous souhaitez dans la police, puis appuyez sur le bouton "Générer la police" en bas de la page. Sur l'écran résultant, vous pouvez ensuite mapper chaque glyphe à un caractère unicode. Sur le côté droit, vous pouvez taper ou coller un caractère, ou sur le côté gauche, vous pouvez entrer son code hexadécimal. Un programme tel que GNOME Character Map (pour Linux) ou Windows Character Map ou Mac OS Character Palette peut vous aider à trouver les codes appropriés pour vos glyphes.

Maintenant, appuyez sur le bouton "Préférences" en haut de l'écran (ou l'engrenage en bas à droite) et finalisez le nom et les métadonnées de votre nouvelle police et appuyez sur "Télécharger" en bas à droite. Vous obtiendrez un fichier Fontname.Zip qui contient un tas de suggestions d'utilisation ainsi que les fichiers de polices eux-mêmes.

Répéter

J'ai trouvé que le dimensionnement et l'espacement étaient vraiment difficiles à obtenir correctement (je faisais des lettres). J'ai continué à itérer sur IcoMoon, à installer la police et à comparer mes lettres à des lettres dans une police similaire (en utilisant un traitement de texte). Le dimensionnement était facile à obtenir correctement, mais l'espacement n'était pas si facile (et je ne jouais même pas avec ligatures ou crénage !). N'oubliez pas que certains systèmes nécessitent de vider le cache des polices après l'installation d'une nouvelle police (sous Linux, c'est fc-cache de Fontconfig )

Valider la police

Vous pouvez également vouloir valider votre police. Font Squirrel est un service en ligne qui vous permet de le faire, offrant des corrections ainsi que des conseils d'utilisation. Je pense qu'IcoMoon le fait déjà, donc peut-être que cela n'est utile que pour les créations FontForge.

20
Adam Katz

Comme d'autres l'ont écrit, il est possible d'importer des formes svg dans fontforge et certains concepteurs de polices fonctionnent de cette façon.

Cependant, les formes (contours) ne sont qu'une partie d'une police intelligente moderne, donc cela ne sera pas suffisant en soi. Vous devez également travailler sur les métadonnées, le crénage, les astuces, etc.

C'est une des raisons pour lesquelles les polices svg ne sont jamais prises en tant que format, il leur manque trop de parties pour être utiles au rendu du texte.

1
nim

Vous pouvez également essayer SVGtoFont . Il fournit tous les formats de police populaires (woff, woff2, ttf et eot), css (SASS LESS) et fichier HTML de démonstration.

1
Sahil Gupta