Plutôt que créer des images ou d’utiliser Flash pour afficher du texte dans la police de caractère de votre choix, vous pouvez utiliser typeface.js et écrire vos titres en HTML et CSS comme si vos visiteurs avait installé votre fonte préférée.
Le script utilise les capacités vectorielles des navigateurs pour dessiner les textes : les navigateurs comme Firefox, Safari et Opera utilisent la balise canvas (et SVG par la même occasion) tandis que IE utilise Vector Markup Language (VML).
Le projet typeface.js est composé d’un module Perl pour extraire la forme vectorielle des fontes Truetype au format JSON. La partie en Javascript parcoure le document à la recherche de <canvas> ou de données VML pour afficher les glyphes.
6 Comments
euh…a priori, ça m’intéresse pas mal, parce que la solution SiFr que je connaissais avait pas mal de limitations (pas d’accents, problèmes avec les textes “in line” qui s’ouvrait mal, choix des polices limité).
Mais je ne sais pas trop quoi faire. je vais aller voir le lien que tu donnes, voir si je m’en sors…
à bientôt, merci pour l’info, en tout cas !
@LOmiG : Perso, je n’ai pas encore eu le temps de tester typeface.js. Mais pour info, à côté de sIFR, il y a également FaceLift qui peut être intéressant car plus léger pour le navigateur d’après Vinch.
Super, merci pour ta réponse rapide. Je cours regarder Facelift…!
à bientôt !
Je trouve cela moyen comme concept malgré tout. Cela ajoute encore un JS et un module à charger pour afficher du texte. Cela va bcp mieux en utilisant des polices standards et pour le texte ou on voudrait vraiment utiliser des polices perso on peut tjrs créer des images en GD/ImageMagick n’est pas si compliqué
Je me renseigne beaucoup sur ces techniques en ce moment (writing
), et j’aimerais signaler que non typeface n’est pas encore la solution ultime (en tout cas, pas encore, il s’agit d’un tout jeune logiciel) : pas de sélection du texte, pas d’alternative (le texte est remplacé par des Canvas , non lu par les lecteurs d’écrans), pas de possibilité d’agrandir le texte, pas de protection des polices : elles sont converti en JS, avec toutes les coordonnées vectoriels (n’importe qui peux la prendre et l’utiliser aussi) et ça peux faire lourd si on met tous les glyphes en plus…
C’est techniquement très malin d’utiliser Canvas et VML, mais ce n’est pas le meilleur choix pour du remplacement de texte selon moi.
Effectivement, c’est techniquement sympa, mais sur la mise en oeuvre, ça risque d’être lourd et de casser l’accessibilité. Merci pour l’info en tout cas
3 Trackbacks
[...] is the original post: Commentaires sur typeface.js – typo personnalisée avec Perl et Javascript (sans Flash ni image) (Ja… Related ArticlesBookmarksTags The Difference Between PHP Echo and Print Few other web [...]
[...] the original post: Commentaires sur typeface.js – typo personnalisée avec Perl et Javascript (sans Flash ni image) (Ja… Related ArticlesBookmarksTags The Difference Between PHP Echo and Print Few other web [...]
[...] here to see the original: Commentaires sur typeface.js – typo personnalisée avec Perl et Javascript (sans Flash ni image) (Ja… Related ArticlesBookmarksTags The Difference Between PHP Echo and Print Few other web [...]