typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)

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 «  ou de données VML pour afficher les glyphes.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



11 commentaires pour “typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)”

  1. LOmiG dit :

    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 !

  2. Bruno Bichet dit :

    @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.

  3. […] 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 […]

  4. LOmiG dit :

    Super, merci pour ta réponse rapide. Je cours regarder Facelift…!

    à bientôt !

  5. touane dit :

    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é ;-)

  6. […] 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 […]

  7. Damien dit :

    Je me renseigne beaucoup sur ces techniques en ce moment (writing :P), 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.

  8. Nicolas F. dit :

    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 ;)

  9. […] 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 […]

  10. […] Typeface — Lire typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image) […]

  11. […] Typeface — Lire typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image) […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site