nicolas.stevenart.eu

La gestion des polices sur le Web a toujours été chiatique au mieux. Typeface.js se propose de changer la donne avec une solution JavaScript intelligente. J’ai testé pour vous…

Actuellement …

Sans hacks, il n’existe en fait que 2 solutions :

• Utiliser des polices “standards” que tout le monde a (ou une majorité significative de la population). C’est en gros le choix entre une police avec empattement (serif) et une police sans (sans-serif). Bien sûr on peut utiliser des polices plus spécifiques mais celles-ci ne donneront rien si le visiteur n’a pas cette police installée sur sa machine.
• Utiliser des images.

Les inconvénients de la première solution, c’est qu’elle laisse peu de place à la créativité (pour ce qui est de la mise en page du texte). Je suis le premier partisan des polices classiques pour le corps du texte mais tout de même, un peu de fantaisie (ou d’élégance) dans les titres n’a jamais fait de mal à personne. Les inconvénients des images sont tellement évidents qu’on ne s’y étendra pas (lourds à générer et encore plus lourds à modifier).

Hack n°1 – Utiliser du Flash (sIFR)

Jusqu’ici, j’utilisais donc un hack Flash qui s’occupait de remplacer les balises voulues par le même texte mais dans une police non-standard (et définie à l’avance bien sûr) : sIFR. Les avantages étaient nombreux : possibilité d’utiliser les polices, bonne compatibilité du Flash, etc. Les inconvénients étaient la lourdeur du procédé et l’obligation de passer par du Flash (et comme nous le savons tous, le Flash c’est mal).

Hack n°2 – Utiliser le tag <canvas> (typeface.js)

Hourra les amis : voici une nouvelle solution entièrement JavaScript ! Typeface.js propose en effet de remplacer la police standard de certains blocs de textes en utilisant la balise “<canvas>” et VML. La simplicité d’utilisation est au rendez-vous et même si la liste des améliorations souhaitée est longue, la version 0.10 est déjà parfaitement fonctionnelle. La preuve ? Elle est en application sur ce blog. Voici donc une solution à surveiller de très près…

Lien: typeface.js — Rendering text with Javascript, <canvas>, and VML