2010-05-06 12 views
5

J'essaye d'implémenter 2 polices de cufon sur la même page pour la première fois. Ça ne fonctionne pas.Cufon polices multiples - Comment?

Dans la documentation ceci est fourni à titre d'exemple:

  <script src="Vegur_300.font.js" type="text/javascript"></script> 
    <script src="Myriad_Pro_400.font.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        Cufon.replace('h1', { fontFamily: 'Vegur' }); 
     Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); 
    </script> 

La chose que je ne comprends pas est - ce qui est le lien entre fontFamily: « Vegur » et la réelle Vegur_300.font.js fichier? En d'autres termes, comment le navigateur sait-il que 'Vegur' est ce fichier en particulier?

merci à l'avance

Répondre

7

Il sait parce que votre fichier Vegur_300.font.js contient une commande Cufon.registerFont qui contient le paramètre objet font-family (en face).

Tant que tous vos fichiers de polices .js sont en cours d'exécution, Cufon obtient les informations d'enregistrement avec les données de courbe pour chaque police. Quant à savoir pourquoi cela ne fonctionne pas pour vous, je ne peux pas spéculer sans plus d'informations. Avez-vous un exemple de site?

+2

Merci Plynx. Problème résolu! Votre réponse m'a aidé à vérifier le fichier javascript de la police. J'y ai vu cette ligne: face « : { » font-family « : » Unité-MediumLF » donc je savais que mettre « Unité-MediumLF » dans le CSS Je pense que la documentation devrait vraiment mettre en évidence ce mieux – swisstony

0
<script src="Vegur_300.font.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    Cufon.replace('h1'); 
</script> 

<script src="Myriad_Pro_400.font.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    Cufon.replace('h2'); 
</script> 

Cela a fonctionné pour moi.

+0

La raison pour laquelle je suggère cela est parce que je ne pouvais pas obtenir la "réponse" d'en haut pour travailler pour moi. – Chris

9

Il est très simple, laisse supposer que vous utilisez 2 familles de polices « Segoe UI » et « Bauhaus 93 » puis placez les scripts comme indiqué ci-dessous:

<script src="js/cufon-yui.js" type="text/javascript"></script> 
<script src="js/Segoe_UI_400.font.js" type="text/javascript"></script> 
<script src="js/Bauhaus_93_400.font.js" type="text/javascript"></script> 
<script type="text/javascript"> 
Cufon.replace('h1', { fontFamily: 'Segoe UI' }); 
Cufon.replace('h2', { fontFamily: 'Bauhaus 93' });  
</script> 
0

Lorsque vous créez votre police Cufon sur their website, vous spécifiez un nom à utiliser pour votre police.

Utilisez la valeur suivante comme la famille de polices de la police générée (en option)

Vous devez utiliser ce même nom lors de l'appel Cufon, ou il ne fonctionnera pas correctement. Je pense que cela pourrait être la raison pour laquelle votre remplacement de police ne fonctionne pas. C'est ainsi que Cufon sait de quelle police vous parlez lorsque vous faites l'appel de fontFamily.

0

Voir: https://github.com/sorccu/cufon/wiki/usage

Utilisation de plusieurs polices

Pour utiliser plusieurs polices il vous suffit de spécifier la police que vous souhaitez utiliser et vous définissez:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script src="cufon-yui.js" type="text/javascript"></script> 
<script src="Vegur_300.font.js" type="text/javascript"></script> 
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script> 
<script type="text/javascript"> 
Cufon.replace('h1', { fontFamily: 'Vegur' }); 
Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); 
</script> 
</head> 
<body> 
<h1>This text will be shown in Vegur.</h1> 
<h2>This text will be shown in Myriad Pro.</h2> 
</body> 
</html>