Not Just another technical weblog…

Aujourd’hui, les services proposant l’hébergement de polices de caractères non standards pour enrichir nos sites web sont de plus en plus présents. Ils permettent généralement d’inclure sur votre site une police (à l’aide d’une API, en achetant une licence, …) non web que vous utiliserez ensuite avec la directive CSS @font-face.

Il existe deux types de services de ce type:

• Des services (gratuit ou payant) permettant d’utiliser une police à distance sur un ou plusieurs domaines (Google Web Font, Font Spring, …)
• Des librairies de polices dans lesquels vous choisissez et acheter une police utilisable sur le web (format de fichier compatible, CSS à copier coller, …)

De mon côté je m’intéresserai principalement aux premiers…
Ils permettent aujourd’hui d’intégrer des polices non système sur le web et ainsi ouvrir de nouvelles perspectives de design de manière beaucoup plus simple que des librairies comme Cùfon ou Typeface.js. En effet ces librairies permettant l’émulation des polices sont complexes à utiliser sur des textes longs (espacement de caractère, de ligne, hauteur de texte, …) et mettent généralement un certain temps à s’afficher du fait que le texte est remplacer en javascript pendant ou après le chargement de la page.

En utilisant @font-face l’internaute télécharge la police de caractère dans son cache navigateur et le rendu est ensuite instantané lors de l’affichage de la page! Google propose aussi une API (WebFont Loader) permettant d’utiliser la plupart de ces services et charger des polices à distance de manière simple et rapide.

Il existe plusieurs site proposant ce système de police, une liste descriptive assez complète a été réalisée sur le blog sprungmarker.de: http://sprungmarker.de/wp-content/uploads/webfont-services/

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 !

Etant toujours en quête de l’allègement des pages web, j’ai récemment trouvé un outil permettant de compresser les codes JavaScript et CSS. Cette librairie appelée « Minify » est hébergée sur Google Code par Steve Clay et Ryan Grove et est basé sur JSMin, programme développé par Douglas Crockford en C.

Plusieurs classes PHP permettent de compresser les fichiers JS, ou les fichiers CSS assez simplement.
Pour ma part, je vais coupler l’utilisation de ce code avec Phing pour alléger le poids des fichiers à transférer lors de l’affichage des pages web que j’aurais créé. Dans un futur post, je présenterais différents processus Phing dont celui-ci…

Plusieurs exemples d’utilisation sont disponibles pour une meilleure compression en fonction de plusieurs cas concret. Ils sont décrit à l’adresse http://code.google.com/p/minify/wiki/CookBook.

Vous trouverez les sources (sous licence BSD) à l’adresse suivante: http://code.google.com/p/minify/