Pour intégrer n'importe quelles polices sur son site cela devient un jeux d'enfant avec cufont, il suffit de télécharger le fichier cufont.yui.js puis de l'intégrer sur sont son site de la même façon que n'importe quel autre fichier javascript.
Ensuite télécharger une police par exemple sur l'excellent site dafont puis ce rendre sur le générateur du site,quelques cases a cocher, puis uploader la police, le résultat est un fichier javascript a rajouter sur le site, ensuite la façon la plus simple est:
cufon.replace('element');Ceci cible qu'un élément comme h1, p, h2 etc ... le top c'est que la fonction accepte un sélecteur css!! Et la ça devient plus intéressant:
cufon.replace('#element');Il est aussi possible de spécifier la police a utiliser dans la fonction:
Cufon.replace('#logo',
{ FontFamily: 'Channel_Slanted_1_oblique'} );C'est pratique quand on a plusieurs types de polices à charger, si la police est pas spécifiée alors cufont charge la dernière police utilser.
Enfin pour terminer, il y a un petit bug avec internet explorer ou un petit délai peu apparaitre avant de remplacer le texte, donc c'est pour cette raison que la fonction now() a été faite:
Cufon.now();
Il faut la placer juste avant la balise body fermante, comme dans l'exemple ci dessous.
Exemple complet :
<html>
<head>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/font/Channel_Slanted_1_oblique_400.font.js" type="text/javascript"></script>
<script src="js/font/Amsterdam_Graffiti_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#logo', { FontFamily: 'Channel_Slanted_1_oblique'});
Cufon.replace('.description', { FontFamily: 'Amsterdam_Graffiti'});
</script>
</head>
<body>
<h1 id="logo">La cave de julien</h1>
<h6 class="description">Site largement consacré â ubuntu et au développement web ...</h6>
</div>
<script type="text/javascript"> Cufon.now()</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire