Qu’est-ce qu’une police exotique ?

Une police exotique est tout simplement une police non-standard. D’accord, vous n’êtes pas plus avancé alors qu’est-ce qu’une police standard ? C’est tout simplement une police présente sur tous les systèmes d’exploitation et prise en charge par tous les navigateurs. La police Arial est une police standard, à contrario la police Helvetica n’est pas une police standard quant à la police Helvetica Neue, ne cherchez pas à la trouver sur un système d’exploitation autre que Mac OS.

En partant de ce principe, le webdesigner et l’intégrateur doivent donc trouver comment faire avec les polices standards et les polices exotiques dans le but d’atteindre le Saint-Graal, un affichage identique sur tous les navigateurs.

Les différentes solutions

Les différentes solutions sont donc relativement simple. Tout d’abord du coté du webdesigner, il faudra faire au maximum avec les polices standards en ne gardant les polices exotiques que pour les éléments « statiques » de votre maquette : logo et navigation par exemple. Seulement cette limite peut être forte pour ceux qui souhaiteraient avoir le titre d’un article affiché avec une police exotique.

Du coté de l’intégrateur maintenant, il faudra faire avec la maquette du webdesigner. Tous les éléments statiques pourront être transformés en images et gérés via les sous propriétés de la balise a : a:link, a:visited, a:hover, a:active, – mémotechnique : LoVe HAte.

Seulement voila, que faire de nos titres utilisant une police exotique et pourtant dynamique ? La aussi plusieurs solutions existent, le remplacement du texte par une image générée via une libraire de type GD ou encore ImageMagick, l’utilisation de propriétés CSS ou encore le recours à Flash et/ou Javascript. Le tout étant de trouver le moyen convenant au maximum de monde.

Écartons directement l’utilisation de GD/ImageMagick, cela implique un peu de travail coté développement et l’intégrateur n’est pas forcément développeur. Au niveau de CSS, @font-face est une solution proposée du coté de CSS3. Enfin, du coté de flash et de JS, beaucoup d’entre-vous connaissent la solution sIFR mais beaucoup d’entre-vous savent aussi que sIFR à quelques problèmes relavant par moment du mysticisme.

Ma solution : CSS3, jQuery et Cufon

Passons maintenant à ma solution, elle utilise CSS3 via @font-face, jQuery pour la détection de la présence des polices et Cufon pour le remplacement. Le but, rendre la chose compatible avec le maximum de navigateurs. Pour les détracteurs, oui, si jamais une personne arrive avec Internet Explorer 6 et le javascript désactivé, cela ne fonctionnera pas.

Première étape : @font-face et CSS3

La première étape de la solution consiste en l’utilisation de @font-face. @font-face est une propriété CSS3, cette première étape ne s’appliquera donc qu’au navigateur supportant cette propriété CSS3.

Pour information @font-face est en fait une propriété CSS 2 complètement délaissé à l’époque de CSS 2.1 puis réintroduite via CSS3.

Nous allons donc prendre notre fichier de police, l’envoyer dans un dossier précis (soyons fou, il se nommera /font/) puis l’inclure dans notre feuille de style de la façon suivante.

@font-face { font-family : 'Ma police exotique';
src: url('font/mapoliceexotique.ttf') format('truetype'); }

Seconde étape, appeler notre police de la façon la plus basique qui soit via la propriété CSS font-family. Nous l’appellerons pour nos titres h3 dans le div avec l’identifiant article.

#article h3 { font-family: "Ma police exotique", arial, sans-serif; }

Seconde étape : cufon

Passons maintenant aux autres navigateurs, nous utiliserons cufon car après beaucoup d’essais en condition de production, cufon est la meilleure alternative à sIFR.

Le fonctionnement de cufon : cufon est composé de deux fichiers, le premier est un fichier yui (interface) chargé de traiter le fichier de police en javascript créé via une interface web. cufon s’implémente via VME sur les vieux navigateurs et via canvas sur les navigateurs plus récents.

Tout d’abord, télécharger le fichier YUI de cufon puis se rendre sur le site internet de cufon afin de générer un fichier javascript de police. Une fois cela fait, envoyer le tout sur votre serveur dans le repertoire de votre choix (disons /js/).

<script src="js/cufon-yui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mapoliceexotique.font.js" type="text/javascript" charset="utf-8"></script>

Troisième étape : jQuery

Une fois l’étape 3 terminée, nous pourrions très simplement nous arrêter la mais cela serait un peu bête car l’étape 1 n’aurait donc aucun sens. Nous allons donc très simplement utiliser notre ma librairie javascript favorite à savoir jQuery ainsi qu’un plugin pour tester la présence du fichier de police sur l’ordinateur du visiteur.

Pour cela télécharger jQuery (si vous ne l’utiliser pas déjà pour tous vos effets javascript) puis le plugin fontavailable. Enfin, envoyer le tout dans votre repertoire /js/ puis inclure le tout.

<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fontavailable-1.1.min.js" type="text/javascript" charset="utf-8"></script>

Passons maintenant au bout de code javascript à intégrer pour utiliser le tout.

	<script type="text/javascript">
	$(document).ready(function() {
	    if(!$.fontAvailable('Ma police exotique')) {
	      Cufon.replace('#article h3');
	    }
	});
	</script>

Conclusion

Passons maintenant au cheminement complet de cette technique :

1. Le visiteur arrive sur votre site, le dom se charge, la feuille de style css est appelé et essaie d’appliquer votre police exotique
2. Votre visiteur n’a pas la police exotique
   1. Il est sur un navigateur supportant @font-face, la police se télécharge.
   2. Il n’est pas sur un navigateur supportant @font-face, le document se charge, fontavailable teste la présence de la police et l’intègre
3. Votre visiteur a votre police exotique
   1. Rien ne se passe

Au final et pour revenir à mon introduction, certains d’entre-vous pourrons s’étonner de l’armada déployée pour l’occasion (qui n’est d’ailleurs pas plus importante que celle utilisée pour une intégration correcte de sIFR) mais le modèle peut être optimisé via fontavailable en ne limitant plus le test au changement de la police mais aussi au téléchargement de cufon-yui.js et votre fichier *.font.js.

BIC, c’est quoi ?

BIC est tout simplement mon framework CSS. Créé en 2006, ce framework se destine avant tout aux intégrateurs et à tout ceux en charge du passage PSD/AI/PDF à une version xhtml. BIC est donc composé de plusieurs fichiers CSS permettant de gagner un peu (voir beaucoup) de temps en intégration grâce à l’utilisation de classe conventionnés et faciles à mémoriser. La première mise à disposition du framework c’est faite avec la version 1.0 avant d’être totalement abandonnée pour ne plus évoluer qu’avec moi. La version actuelle est maintenant estampillée 2.7.1 et à totalement été repensée.

Comment se compose le framework ?

Il utilise très simplement un fichier CSS d’appel baptisé screen.css. A l’intérieur de ce fichier, les appels à d’autres fichiers CSS permettant d’ajouter des classes. Chacun des fichiers CSS est documenté avec une table des matières et crédités en conséquence. Le fichier reset.css est par exemple basé sur celui d’Eric Meyer, le fichier grid.css est quant à lui basé sur 960.gs.

Comment installer le framework ?

Très simple, il suffit de désarchiver l’archive bic.tgz à la racine de votre template ou site. L’archive créera le fichier d’appel screen.css et un dossier « css » contenant les autres fichiers CSS. Une fois cette étape finie, vous pouvez inclure le framework dans votre structure xhtml ou équivalente.

1

<link href="screen.css" rel="stylesheet" type="text/css" media="screen, projection" />

Vous pourrez ensuite ouvrir le fichier screen.css pour créer vos différents style à la suite de ce qui est déjà fait.

Documentation

Aucune documentation n’existe pour le moment, celle-ci étant prévue pour la version 3.0 du framework – avec un nouveau nom. Le framework à été éprouvé de la façon suivante :

• Un changement profond du framework est caractérisé par le premier numéro
• Un changement mineur ou un ajout est caractérisé par le second numéro
• Un correctif est caractérisé par le troisième numéro

Vous trouverez cependant de quoi vous documenter (en plus des questions que vous pourrez poser ici) sur mon autre blog ayant servi de labo pour une suite d’article sur la création d’un site internet.

Pour information la version 2 correspond à une refonte complète du framework, la version 2.7 correspond à un changement au niveau des familles de police et la 2.7.1 à un correctif (faute de frappe) dans une classe.

Téléchargement

BIC version 2.7.1 (4 ko)

Faire un don