web-dev-qa-db-fra.com

Créer des polices d'icônes avec un logiciel vectoriel (c'est-à-dire inkscape) et fontforge?

En obtenant des réponses ici et des recherches, j'ai découvert une nouvelle approche de la mise en œuvre des icônes. Plutôt que comme images ou arrière-plan CSS, il semble que vous puissiez aborder les icônes comme une police.

Cette méthode signifiera-t-elle finalement la création d'un jeu de polices d'un fichier auquel chaque icône est affectée à un caractère? Parce que cette méthode est si nouvelle pour moi, je veux vraiment m'assurer de l'approcher correctement en premier (je vois un grand potentiel ... tellement mieux que de créer différentes icônes, d'exporter chacune comme son propre fichier .png pour chaque couleur et taille différentes).

Si c'est le cas, il faudra un peu de mémorisation (d'autant plus que j'ai plus de 26 icônes). Pour ceux qui sont plus expérimentés avec fontforge, existe-t-il un moyen de dire un caractère Word = spécifique?

Aussi, en ce qui concerne la mise en œuvre de cela sur le site Web. J'aurais alors besoin de spécifier le type de police dans la classe/id CSS (c'est-à-dire police = icônes;). Et puis je pourrais aussi changer la taille, la couleur, etc. avec css? Mec, si c'est vraiment vrai. J'aimerais avoir découvert plus tôt ... des heures et des heures auraient pu être sauvées.

Quoi qu'il en soit, toute aide à cet égard est grandement appréciée. Je suis sur le point d'obtenir Fontforge et de commencer à apprendre (s'il existe un meilleur logiciel gratuit pour la création de polices, faites-le moi savoir). Espérons que cela fonctionne.

fontssvgtrue-type-fontsinkscapefontforge
28
jstacks

J'ai réussi à créer quelques polices d'icônes pour mes sites Web et l'approche Inkscape FontForge comme indiqué dans ce mode d'emploi est assez solide, et si vous avez l'habitude d'utiliser des logiciels tels qu'Inkscape, c'est aussi assez facile aussi. Voici les étapes [~ # ~] i [~ # ~] prenez:

Préparation (en utilisant Inkscape dans cet exemple)

  1. Ouvrez le document Inkscape qui contient vos conceptions.
  2. Assurez-vous d'avoir converti toutes les formes, types et lignes en chemins et vérifiez votre dessin en mode contour pour en être sûr. S'il y a des problèmes sont, vous pouvez toujours vous référer à ce fichier de base pour apporter des modifications initiales aux formes.
  3. Créez un nouveau document en sélectionnant Nouveau> fontforge_glyph .
  4. Collez une icône de votre conception dans le nouveau document.
  5. Redimensionnez l'icône pour qu'elle corresponde à l'espace fourni (bien qu'il soit préférable de redimensionner toutes les icônes du document de conception original en premier).
  6. Centrez l'icône sur la page à l'aide de l'outil Aligner (le cas échéant).
  7. Enregistrez le dessin au format ordinaire SVG (c'est plus facile si vous titrez en fonction de la lettre à affecter, par exemple. "j.svg").
  8. Répétez l'opération pour les autres icônes.

Je laisse souvent ce document SVG simple ouvert, en collant de nouvelles icônes et en centrant et en dimensionnant selon le dernier. De cette façon, il y a une cohérence de taille et de position dans l'ensemble d'icônes (et vous n'avez pas à continuer de choisir le répertoire pour enregistrer vos SVG simples).

Création de glyphes (en utilisant FontForge)

  1. Une fois que vous avez créé un fichier SVG pour chaque icône, ouvrez FontForge et créez un nouveau document FontForge.
  2. Dans la fenêtre principale de la liste d'affichage des glyphes, double-cliquez sur l'une des lettres/chiffres pour lesquels vous avez une icône.
  3. Dans cette nouvelle fenêtre de glyphe, choisissez Fichier> Importer et sélectionnez l'un de vos fichiers SVG (vous devrez probablement changer le filtre de fichier dans la boîte de dialogue de fichier pour afficher les fichiers SVG).
  4. Si l'importation enregistre des erreurs et que le filaire semble avoir subi une légère explosion, vous devrez revenir à Inkscape pour trier le chemin. Il existe un moyen simple de découvrir le problème qui devrait fonctionner dans la plupart des cas:
    • Dans Inkscape, supprimez le remplissage de l'icône.
    • Ajoutez un trait fin (1px fera l'affaire).
    • Convertissez le trait en tracé.
    • Il manque probablement à la forme résultante une partie de votre icône.
    • Annulez tout, puis séparez l'icône et redessinez/tracez/corrigez la zone à problème.

Création de polices (à l'aide de FontForge)

  1. De retour dans FontForge, une fois que vous avez ajouté toutes vos icônes, vous devez donner un nom à votre police. Dans la fenêtre principale, sélectionnez Élément> Informations sur la police .

  2. Modifiez les éléments suivants:

    • Nom de la police : MyFontMedium
    • Nom de famille : Ma police
    • Nom pour les humains : My Medium Medium
    • Poids : Book (Win XP pense medium = bold, donc mieux utiliser Book)

  3. Dans la fenêtre principale, choisissez Fichier> Générer des polices et enregistrez-les dans TrueType (en ignorant toutes les erreurs).

Validation/conversion des polices

  1. Allez sur www.fontsquirrel.com/fontface/generator ou un service similaire pour télécharger votre fichier TTF et le convertir (et le corriger)
  2. Le fichier Zip que vous téléchargez contiendra des instructions précises sur la façon d'implémenter les polices dans votre projet Web.

J'espère que cela vous sera utile.

58
wayfarer_boy

Voici un exemple open source de ce que vous cherchez à faire:

http://fortawesome.github.com/Font-Awesome/

Si vous regardez leur code, vous pouvez voir comment exécuter le CSS:

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

Et si vous souhaitez modifier les polices, téléchargez FontAwesome.ttf et modifiez-les dans FontForge. Si vous voulez faire votre propre TTF, vous pouvez, mais jetez un coup d'œil et copiez comment ils l'ont fait, je suppose.

( Avertissement: je n'ai pas fait cette partie du processus. Dans notre équipe, l'un des gars utilise une application Mac propriétaire pour trouver la police. Si je dois faire ma propre icône les polices à l'avenir, je vais probablement utiliser Inkscape et FontForge cependant. J'ai vérifié suffisamment pour voir que FontForge peut importer SVG, je ne l'ai pas essayé cependant ).

Lorsque vous avez terminé et que vous disposez de votre police TTF comme vous le souhaitez, vous devez convertir la police dans les nombreux formats différents nécessaires pour l'utiliser comme police Web. J'utilise cet outil en ligne gratuit:

http://fontface.codeandmore.com/

... qui vous donnera vos fichiers de polices EOT, SVG, TTF et WOFF, qui devraient vous couvrir pour presque tous les navigateurs. Vous devez ensuite inclure ces fichiers dans votre CSS, comme illustré dans le fichier lié ci-dessus. Remarque: pour le fichier SVG, il y a un ID que vous devrez mettre à jour. Je pense qu'il est automatiquement choisi par l'outil de conversion, vous devrez donc modifier le SVG, vérifier ce qu'est l'ID et l'inclure.

Par exemple, dans ce code:

@font-face {
  font-family: 'MyIcons';
  src: url('myiconfont-iconglyphs.eot');
  src: url('myiconfont-iconglyphs.eot#iefix') format('embedded-opentype'),
       url('myiconfont-iconglyphs.woff') format('woff'),
       url('myiconfont-iconglyphs.ttf')  format('truetype'),
       url('myiconfont-iconglyphs.svg#myiconfont-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Vous devrez peut-être modifier le #myiconfont-regular bit après la définition svg.

7
Jason O'Neil