LES FONTES
Depuis des siècles, les designers web tentent tant bien que mal d'exprimer leur créativité malgré la dictature impitoyable des familles Arial, Verdana et autres Tahoma. Mais à l'horizon pointe une lueur d'espoir. Le moment où les designers pourront enfin utilisé la fonte de leurs choix approche, sans le moindre égard aux limitations qui pullulent du côté client et, ainsi, éviter les soupirs de leurs collègues intégrateurs.
CSS3
Même si elle existe depuis CSS2, la propriété CSS @font-face n'a toujours pas été adoptée à grande échelle. Triste, surtout si on tient compte de la facilité d'implantation:
/*CSS*/
@font-face{
font-family: 'laFonte';
src: url('../laFonte.ttf');
}
/*Après avoir annoncé la règle @font-face, il ne
s'agit que d'attribuer la nouvelle famille aux balises souhaitées*/
p {
font-family: "laFonte",Verdana, Geneva, sans-serif;
}
/*fin*/
Si le fureteur ne supporte pas @font-face ou s'il y a un problème avec la source, la fonte suivante dans le "CSS font stack" jouera son rôle.
Cependant, deux problèmes majeur se dresse devant les utilisateur potentiel de cette façon de faire.
Premièrement, pour la plupart des fonderies rendre une de leur fonte disponible sur un serveur web constitue une violation des droits d'utilisation de celle-ci.
Deuxièmement. Le support est encore très peu convaincant. Safari 3.1 est le seul qui supporte cette propriété. Opera 10 et Firefox 3.5 devrait l'implanter, tandis qu'IE la supporte seulement si la fonte liée est une "Embedded OpenType".
Une .EOT est créée grâce au logiciel WEFT de Microsoft (ou ttf2eot pour Linux). La transformation d'une fonte dans ce format compressé ne se fait malheureusement pas toujours sans heurts. Certaines glyphes peuvent être altérées, et certaines fontes ne survivent tout simplement pas à l'opération de compression du logiciel de Microsoft. Ce qui rend cette avenue fort hasardeuse.
EN ATTENDANT
D'ici à ce que @font-face soit réellement implanté dans notre univers multi-fureteur, nous avons qu'en même à notre disposition des outils pour combler cet étonnant vide technologique... Voici deux solutions ayant fait leur preuve. SiFr est dans le décor depuis belle lurette et Cufòn est un nouveau venu fort prometteur...
sIFR (Scalable Inman Flash Replacement)
L'idée de base est simple. Intégrer la fonte souhaitée dans un SWF ayant un champ texte dynamique à l'intérieur. Puis, grâce au javascript, localiser les textes à remplacer, les mesurer et les "lire". Ensuite, créer des objets Flash de même taille, contenant le même texte et les placer à la même position que le texte remplacé.
L'implantation est relativement facile: Il faut créer un SWF, importer un fichier javascript et écrire une ligne de code javascript pour chaque type de balise/class/id que l'on veut remplacer qui pourrait bien ressembler à ceci:
sIFR.replaceElement("h1", named({sFlashSrc: "./vandenkeere.swf", sColor: "#000"}));
Cependant, il est nécéssaire de faire un peu de lecture afin de comprendre l'interaction entre le javascript, le SWF et le CSS.
Les avantages sont nombreux :
- Textes sélectionnables et disponibles pour les engins de recherche.
- Fontes nettes et précise.
- Textes sujets aux CSS et à certains effets Flash (dropshadow, anti-aliasing, etc...).
- Reconnaissance et soulignement automatique des liens.
- Plusieurs "add-ons" dont un pour JQuery.
- Totalement légal du point de vue des fonderies.
Il y a qu'en même quelques désavantages :
- Requiert le Javascript activé ainsi que FlashPlayer 6+ pour fonctionner.
- Étant un outils très malléable - le "font-tuning" surtout - SiFR peut devenir très complexe et source de frustration dans des projets complexes où se côtoient divers "frameworks" Javascript et/ou des feuilles de style tentaculaire.
D'ailleurs, les concepteurs suggèrent d'utiliser sIFR avec parcimonie. Si vous confinez l'outil à des endroit rare et bien choisie, l'intégration ne sera que plus aisée.
Cufòn
L'avenir est rose et simple pour cet héritier de Typeface. Grâce à un générateur disponible gratuitement, on peut convertir une fontes en fichier .js qui nous permettra de reproduire en SVG les glyphes souhaitées.
Tout aussi simple d'implantation que sIFR, voir même plus, Cufòn requiert peu de chose. On créer le fichier de fonte dans le générateur en 2-3 cliques, on importe le fichier de fonte ainsi que le fichier Javascript Cufòn dans le "header" de la page. Puis, on remplace le contenu des balise désiré en appelant une méthode portant le nom judicieux de... replace() !
<script type="text/javascript"src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/funky.font.js"></script>
<script type="text/javascript"> Cufon.replace('h1'); </script>
Les avantages :
- Seul le Javascript est nécéssaire
- Coté CSS, les images créées sont identiques aux glyphes remplacées.
- Supporté par la quasi-totalité des fureteurs: FireFox 1.5+, Safari 3+, Opera 9.5+, Chrome et IE 6/7/8, ce dernier requiert une ligne Javascript de plus en fin de page pour palier à sa lenteur d'affichage, mais rien de majeur.
- Communauté florissante et motivé à amélioré le concept.
Malheureusement, Cufòn est encore loin d'être parfait :
- Sélection du texte impossible.. une image reste une image.
- Problème avec quelques vieilles fontes PostScript Mac.
- Fidélité de transitions entre glyphes et images SVG pas toujours parfaite, mais toujours correct.
- Encore quelques zones grises du point de vue légal. Mais les discussions vont bon train semble-t-il.
- Problème avec certains sélecteurs CSS spécialisés.
Cufòn n'offre rien de plus qu'un simple remplacement d'image du point de vue de l'accessibilité, cependant, si les changement de titre sont fréquents, ce dernier reste une alternative à ne pas négliger...
En terminant, si les titres en fontes particulières sont votre pain quotidien, prendre quelques heures pour maitriser sIFR parait être un excellent investissement qui ne ferait qu'améliorer le référencement de vos créations.
Sinon, Cufòn reste une alternative simple qui reste qu'en même plus aisée que d'avoir à changer les images de vos titres dans Photoshop à chaque changement de virgule!
Lien vers sIFR.
Lien vers Cufòn.
