Vous avez envie de mettre un peu de nouveauté sur votre site, de le rendre original, différent, attractif? Vous en avait marre de passer par un éditeur d’image pour utiliser un texte avec une police personnalisée?
Cufon est tous ce qu’il vous faut. Ce script écrit en JavaScript est compatible avec les navigateurs Internet Explorer 6+, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome et peut-être bientôt Safari 2 et IE 5.5.
Cette techniques remplace des éléments de votre code HTML (h1, h2, p, span, etc.) par un tracé vectoriel effectué par des moteurs de rendu propres aux navigateurs. Si le JavaScript est désactivé, vos textes s’afficheront avec la police et style par défaut.
Sur le site officiel, il est possible de générer un fichier JavaScript comprenant les informations sur le tracé vectoriel de la police personnalisé (nous y revenons plus bas).
Pour le mettre en place, rien de plus simple, Ã peine 3 lignes de code et 1 copier/coller.
Le copier/coller !!!
Donc première étape, aller copier/coller le script cufon-yui.js en cliquant sur le lien.
Les trois lignes à rajouter !!!
Une fois ce fichier dans votre répertoire, on va venir rajouter ces trois lignes :
<script src="cufon-yui.js" type="text/javascript"></script>
<strong><script src="votre_police.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h1');</script>
Le contenu de votre page test.html est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="votre_police.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
<style type="text/css">
h1 {
font-size:40px;
color:red;
}
</style>
</head>
<body>
<h1>blog.firehist.org</h1>
<p>De l'innovation nait la solution ... et inversement!</p>
</body>
</html>
Impressionant! Pour ce qui est du fichier de la police il suffit de se munir de son fichier font (téléchargeable surdafont.com par exemple) et de générer le fichier javascript correspondant sur le générateur du site officiel!
Voilà , bon dév’ :D
