Blog

Ca y est, le nouveau site de TagExpert est en ligne et nous allons donc commencer à faire l'inventaire des nouveautés.

Nous abordons donc comme premier élément la gestion des polices exotiques. Mais qu'est-ce qu'une policie exotique? Il s'agit d'une police qui n'est pas systématiquement présente sur n'importe quel ordinateur. En effet, chaque système d'exploitation vient avec une série de polices installées. Par exemple, tous les ordinateurs possèdent la police Arial mais seul Mac OS X possède la police Helvetica Neue par défaut. Cela veut dire que si notre site utilisait cette dernière, seuls les ordinateurs équipés de Mac OS seraient capables d'afficher le site tel que le design le prévoit.

Il existe cependant plusieurs solutions afin d'afficher une police spécifique quel que soit l'ordinateur. Nous allons nous attarder sur deux d'entre elles: la propriété CSS @font-face et la solution JavaScript Cufon.

Chacune de ces méthodes répond aux besoins de notre site et chacune a ses avantages et inconvénients. Choisir l'une ou l'autre dépend donc essentiellement d'un choix à faire par l'équipe de développement en fonction des impératifs du site.

@font-face

La première solution est donc l'emploi de la propriété CSS @font-face. Cette règle fait appel à une police chargée directement sur le site. Le code suivant illustre la mise en place de cette méthode:

@font-face{

    /*On donne un nom (au choix) à la police téléchargée */

    font-family: "NomDeLaPolice";

    /*On indique le chemin du fichier à télécharger */

    src: url("police.otf");

}

Ce bout de code permet de charger la police, il nous reste alors à l'utiliser sur les éléments désirés:

h2.title{

    font-family: "NomDeLaPolice", Arial, sans-serif;

}

Cette méthode semble simple au premier abord mais comporte cependant quelques inconvénients.

Le premier inconvénient est que si vous devez utiliser du gras, de l'italique ou du gras italique, il vous faudra charger 4 fichiers de police différents. Le problème réside dans le poids de votre page car ces fichiers peuvent peser de quelques kilo-octets à plusieurs mega-octets pour certaines polices.

De plus, le fichier téléchargé dans l'exemple ci-dessus sera illisible pour tous les ordinateurs utilisant Internet Explorer car ce dernier ne reconnait pas les fichiers de type OpenType (.otf). Un problème de compatibilité s'ajoute alors à la liste d'optimisations à faire pour Internet Explorer. Il sera donc nécessaire de charger d'autres fichiers enregistrés dans un format lisible par Internet Explorer ce qui aura pour effet d'alourdir encore le poids de la page.

Cufon

La seconde solution abordée est celle retenue pour notre site. Il s'agit de faire appel à de JavaScript afin de charger la ou les polices désirées et ensuite de les assigner aux bons éléments de la page.

Cette méthode utilise donc Cufon qui fonctionne de la manière suivante:

• insertion du fichier JavaScript nécessaire au bon fonctionnement de la solution,
• génération du fichier de polices à l'aide du site internet de Cufon,
• assignation des polices à l'aide de jQuery

Les avantages sont donc le poids réduit de ces fichiers et la compatibilité avec tous les navigateurs.

Le gros désavantage de Cufon est la pollution de votre code source.

Voici le markup modifié une fois la police utilisée:

<h2 class= "title">

   <cufon class="cufon cufon-canvas" alt="Mon titre" style="width: 112px; height: 21px; ">

      <canvas width="125" height="24" style="width: 125px; height: 24px; top: -3px; left: -1px; ">

      <cufontext>Mon titre</cufontext>

   </cufon>

</h2>

Conclusions

Il n'existe pas de solution miracle pour utiliser des polices exotiques sur votre site. Nous avons fait ici la démonstration de deux méthodes mais il en existe d'autres. Nous avons pu nous rendre compte que chacune possède ses propres défauts et le choix de leur utilisation repose principalement sur des choix personnels.

Voici donc pour ce premier article qui en amènera d'autres. Nous aborderons prochainement l'optimisation de ces deux méthodes et plus particulièrement l'optimisation de la propriété @font-face.

N'hésitez pas à réagir à cet article et à nous faire part de vos expériences personnelles en la matière.