Deborah Garcia

La méthode Typeface.js utilise le rendu vectoriel des navigateurs

Dans la série comment utiliser d’autre police que les polices web standards je vous proposais :

• sIFR
• FLIR

On continue avec Typeface.js. C’est une méthode entièrement basée sur du JavaScript et HTML/CSS. Plutôt que de générer une image (FLIR) ou d’utiliser du Flash (sIFR), Typeface se base sur la capacité des navigateurs à tracer du vectoriel. SVG pour Firefox, Safari et Opéra et VML pour Internet Explorer.

Typeface.js : la méthode tout JavaScript

On a besoin de 2 fichiers pour commencer :

• La dernière version de typeface.js
• et un fichier js de votre police que vous pourrez convertir sur cette page

J’ai choisi pour cet exemple la police Just Old Fashion. Si vous voulez vous éviter la manip de conversion, vous pouvez télécharger directement le fichier.

Vous avez donc 2 fichiers que vous allez mettre dans un dossier js à la racine du serveur :

• justoldfashion_regular.typeface.js
• typeface-0.11.js

Ouvrez la page où vous souhaitez intégrer Typeface et placez ce code dans l’entête entre les balises head :

<link rel="stylesheet" type="text/css" ref="/style.css" />


<script type="text/javascript" src="js/typeface-0.11.js"></script>
<script type="text/javascript" src="js/justoldfashion_regular.typeface.js"></script>
</head>

Ajouter la classe typeface-js à l’élément que vous voulez styler :

<p class="typeface-js"><a href="http://typeface.neocracy.org/" title="Typeface.js">Typeface.js</a> utilise la capacité des navigateurs à tracer du vectoriel. C'est une librairie qui ne nécessite aucune connaissance particulière et qui est très simple à mettre en place. </p>

C’est pratiquement terminé, maintenant, il suffit d’éditer la feuille de style

La mise en forme

Styler vos éléments comme bon vous semble

p.typeface-js {
	font-size: 25px;/* Attention Typeface ne comprends pas les tailles de police relative (em)*/
	font-family: JustOldFashion, Georgia, serif;/* Dans cet exemple nous n'avons qu'une seule police utilisé par Typeface, on aurait pu se passer de déclarer la famille de police*/
	font-weight: bold;
	color: #6a6a6a;
	line-height: 1.4em;
}

Et le résultat :

Typeface.js utilise la capacité des navigateurs à tracer du vectoriel. C’est une librairie qui ne nécessite aucune connaissance particulière et qui est très simple à mettre en place

On obtient un texte qui n’est ni une image, ni du flash, mais bien du texte. Le seul point négatif que j’ai noté et c’est la raison pour laquelle je m’en tiens à FLIR c’est que la taille de la police ne peut être défini en taille relative.

Vous avez donc maintenant 3 alternatives pour modifier vos textes comme bon vous semble. Il faut pourtant préciser que ces méthodes ne devraient pas être utiliser pour tout le texte d’une page, au risque de ralentir son affichage.
Faites-en bon usage !

Articles sur le sujet :

• Exemples et documentation Typeface.js (en anglais)

subscribe to my RSS feed