Gérer les variantes d'une police avec Cufón
canvas. Elle se présente comme une alternative intéressante aux règles CSS3 @font-face pour les polices vraiment exotiques, dont le rendu natif par les navigateurs n'est pas optimal. En revanche, sa lourdeur ainsi que le fait que le texte ainsi rendu ne soit pas correctement sélectionnable font qu'il vaut mieux réserver son usage aux titres et autres éléments spécifiques.Le générateur en ligne permet d'obtenir facilement un fichier JS embarquant une ou plusieurs variantes d'une police, réparties entre les classiques normal, gras, italique et gras-italique. Malheureusement, ce dernier gère plutôt mal la correspondance entre lesdites variantes et leurs équivalents CSS, il vaut donc mieux s'occuper nous-mêmes de cet aspect.
Voici un exemple de déclaration de police dans un fichier généré par Cufón :
Cufon.registerFont({"w":187,"face":{"font-family":"Avenir","font-weight":600,"font-style":"oblique", // ...Il suffit de modifier à la main ces déclarations, en spécifiant une valeur de graisse (pour information, 400 correspond à
normal, et 700 à bold), et en ajoutant la règle font-style pour les déclinaisons en italique. Cela vous permettra également d'outrepasser la limite intrinsèque de 4 déclarations par fichier si nécessaire, en regroupant plusieurs fichiers en un seul, d'où économie de nombre de requêtes HTTP et donc de temps de chargement de votre page !