cufòn: Intégration de polices non standards sans CSS 3 ou Internet Explorer

Depuis quelques temps, je m’intéressais à une façon intéressante d’intégrer des polices de caractères non standard dans un site web sans utiliser CSS3 ou Internet Explorer. Je cherchais une solution légère et multi plateforme.

J’ai d’abord été amené à utilise sIFR, qui est une solution intéressante mais elle n’est pas très légère. En effet le principe de fonctionnement est le suivant, un fichier SWF contenant un champ texte est utilisé après y avoir intégré une police et les caractères souhaités. Un sélecteur CSS est ensuite utilisé pour récupérer la liste d’éléments à transformer, sur chacun de ces éléments un flash est affiché en y injectant le texte, le lien et plusieurs autres paramètres (couleur, graisse, …).

Le résultat obtenu est assez intéressant mais dès qu’il y a beaucoup d’éléments à remplacer avec plusieurs types de polices, les pages générées deviennent vite lourdes à manipuler par un navigateur (la machine virtuelle flash n’est pas reconnue pour sa légèreté… ;) ).

N’étant pas pleinement satisfait pas cette solution, j’ai continué de chercher et des collègues m’ont fait part d’une technologie qu’ils avaient trouvés, cufòn. Cet outil fonctionne sur le même principe de remplacement par sélecteur CSS d’items HTML mais la manipulation de police est différente (son principe de fonctionnement est défini ici).

En effet, des fichiers JavaScript sont générés à partir des fichiers de polices (TTF, OTF, PFB, PostScript) permettant à la librairie de réécrire au format vectoriel (VML) les textes sélectionnés. Pour les navigateurs compatibles HTML5 (FireFox 3.5+, Opera, Safari 4+, Chrome, …), la balise Canvas est utilisée pour faire le rendu. Pour les autres navigateurs, soit le format vectoriel SVG est utilisé pour dessiner un caractère ou un groupe de caractère soit le format VML, ce dernier étant directement supporté par Internet Explorer. Le respect de ces différentes normes permet de rendre cufòn compatible avec la majorité des navigateurs du marché (si ce n’est tous…) et non dépendant d’un plugin externe (le rendu reste figé pour tous les internautes).

Une interface web appelée « Generator » permet, après upload des fichiers de polices de caractères, de générer le fichier JavaScript à utiliser pour afficher les textes sur le site. A travers cet interface l’utilisateur peut choisir:

  • d’inclure les polices en bold, italic, bold italic, regular
  • spécifier le nom de la police dans le fichier
  • définir quels caractères doivent être inclus dans le JavaScript (tous, nombre, ponctuation, latin, cyrillique, …)
  • possibilité de rajouter des caractères « en dur » pour agrémenter la police
  • verrouiller l’utilisation de la police sur un domaine particulier (pour gérer les droits de diffusion)

Voici un exemple d’utilisation de cufòn pour remplacer toutes les balises H1 par leurs équivalents dans la police « Champagne & Limousines »:

<head>
    ...
    <!-- JS FILE LOADING -->
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/Champagne__Limousine_700.font.js" type="text/javascript"></script>
    <!-- END JS FILE LOADING -->
    ...
</head>
<body>
    <h1>TEXTE A REMPLACER</h1>
    <script  type="text/javascript">
        Cufon.replace('h1');
        Cufon.now();
    </script>
</body>

Faites moi savoir si cette technologie vous a été utile :) !

2010
04/20
POSTE PAR
CATEGORIE
HTML / CSS
JavaScript
TAGS



3 commentaires

  1. Pas encore testé, mais en tous cas ça a l’air très utile !

  2. @WoodGate: Intéressant en effet, une limitation non négligeable reste qu’on ne peut pas directement sélectionner le texte…

  3. Je l’utilise depuis un petit moment et c’est parfait, y a même des plugins wordpress qui existent.

    Je crois que je vais bientôt utiliser Typekit
    http://typekit.com/libraries/full

  1. 6 juin 2011
    Trackback depuis:Bilbiothèques de font libres à utiliser avec @font-face | Todd's WeBlog