Cufon ou comment personnaliser vos polices

16 03 2010

Quand on fait un site web on est vite limité par le nombre de police disponible, pas de fantaisie sur le web. Pour y remédiez vous pouvez utiliser Cufon.

C’est quoi ce truc ?

Ce « truc » est une librairie javascript qui va dessiner votre texte selon la police que vous voulez.

Comment ça marche ?

Vous devez sur le site de Cufon et uploader les fichiers de votre police sous 4 formats différents:

  • normal
  • gras
  • italique
  • gras et italique

Vous paramétrez les types de caractères à insérer, faites attention a utiliser une police avec des accents et à l’indiquer dans les options. Vous obtenez un fichier javascript du type la_police.font.js, c’est lui qui dessinera votre texte (n’oubliez pas également la librairie cufon.js).

J’ai mis tous ces fichiers mais je vois rien.

Ah oui, j’oubliais il faut déclarer quels textes seront remplacés, ça se fait avec jQuery:


jQuery(document).ready(function() {
Cufon.replace(‘.blogname’, { fontFamily: ‘MankSans-Medium’});
});

Ici chaque fois qu’une balise sera de la classe « blogname » on dessinera le texte correspondant avec la police MankSans-Medium.

On va devoir réécrire cette ligne pour chaque classe ?

Bien sur que non! si vous voulez utiliser la même police pour plusieurs classes CSS, il suffit d’ajouter les autres classes à la suite, comme ceci:

jQuery(document).ready(function() {
  Cufon.replace('.blogname, .titre', { fontFamily: 'MankSans-Medium'});
});

Mais ce n’est pas tout! Cufon prend également en compte le passage de la souris sur le texte, le « hover » du CSS:

jQuery(document).ready(function() {
  Cufon.replace('.title', { fontFamily: 'Myriad Pro', hover:true});
});

Vous avez vu le « hover:true » ? Cette option autorise l’utilisation du descripteur hover de la classe « title », la classe non ?

Pourquoi tu dis tout le temps « dessiner » ?

Parce que le texte générer par Cufon sera une image! Cufon utilise la balise canvas pour dessiner le texte dans la police choisie, d’où toutes ces longues opérations.

Une fois mise en place, ça devient facile Cufon utilisera les couleurs et tailles de polices telle que définit dans le CSS.

Source La Geekette

Publicités

Actions

Information

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s




%d blogueurs aiment cette page :