Des geekeries, de la MAO, de tout et de rien…
Je suis
Charlie

Édition de police d'écriture

Icône auteur nah, Icône canondrier 03 octobre 2015, Icône commentaire
Mots clés Icône catégorie geekeries, Internet, brique internet, internet cube, classé dans Icône catégorie Blog, Asrall, Geekeries, Internet

Une petite question qui revient de temps en temps :
Comment faire pour faire apparaître des « ondes wifi » sur la lettre i, comme sur le site de La Brique Inter.net, sans que cela soit une image ?


Introduction

Texte La Brique Inter.net, en noir sur fond blanc, avec les ondes sur le i.
Logo hype

Si on affiche le site sans javascript, on voit que c'est le caractère Î qui est affiché.

Texte La Brique Inter.net, en noir sur fond blanc, avec un i accent circonflexe majuscule.
Logo pas hype

Note : J'ai utilisé des images [1] pour pouvoir « illustrer » l'article.

Outils nécessaires : uniquement des logiciels libres.

  • Inkscape, pour l'édition vectorielle ;
  • FontForge, pour éditer une fonte de la police d'écriture.

La police Jura (Jura Book) a été dessinée par Daniel Johnson et est sous licence "SIL Open Font Licence", qui autorise (entres autres) les modifications. Cette police est disponible dans toutes les bonnes crèmeries, n'hésitez pas à la demander à votre moteur de recherche favori.


Inkscape

Ouvrons Inkscape, et dessinons des ondes.

Capture d'écran du logiciel inkscape.
Logo dessiné

Ça, c'était la partie la plus amusante.

FontForge

Ouvrir FontForge, ouvrir la police Jura, et sélectionner la case du Î (i majuscule accent circonflexe).

Capture d'écran du logiciel FontForge, lettre Î sélectionnée.
La case avec la lettre Î

Double-cliquer sur la case pour passer en mode « dessin ».

Sélectionner puis supprimer l'accent circonflexe.

Capture d'écran du logiciel FontForge, mode dessin. Capture d'écran du logiciel FontForge, accent circonflexe sélectionné. Capture d'écran du logiciel FontForge, accent circonflexe supprimé.
Édition de la lettre Î

Revenir sur Inkscape, sélectionner (et copier) le dessin vectoriel (donc, les ondes), et coller directement dans FontForge.

Il faudra sans doute effectuer quelques petites retouches, et aligner les ondes.

Capture d'écran avec le logiciel FontForge, et la lettre Î terminée.
Résultat final

Export final

Enregistrer la police de caractère (pour pouvoir la modifier plus tard), puis générer les différentes fontes pour le web (ttf, woff…), soit via un site web dédié, soit via la ligne de commande ; se référer à l'article Conversion de polices pour le web pour ce dernier cas.

Conclusion

Avec un peu de temps et deux logiciels libres, on peut éditer aisément n'importe quelle police d'écriture pour y intégrer des images vectorielles. Les seules limitations sont : le nombre de couleurs, l'imagination, et la licence de la police. Toutes n'autorisent pas la modification et encore moins l'utilisation en dehors du cadre « personnel » (en gros, ça ne sort pas de votre ordinateur/téléphone).

L'étape d'Inkscape est totalement optionnelle, on peut dessiner directement dans FontForge, même si c'est moins évident/facile.

Tout commentaire qui n'a rien à voir avec cet article se verra supprimé sans sommation.


1 : Flemme d'installer la police d'écriture jurabook pour seulement un article.