2010-05-06 22 views
5

Estoy intentando implementar fuentes de 2 cufones en la misma página por primera vez. No funciona.Cufon multiple fonts - ¿Cómo?

En la documentación de esto se proporciona como un ejemplo:

  <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> 

Lo que no entiendo es - ¿cuál es la relación entre fontFamily: 'Vegur' y lo actual Vegur_300.font.js ¿archivo?

En otras palabras, ¿cómo sabe el navegador que 'Vegur' es ese archivo en particular?

gracias de antemano

Respuesta

7

Se sabe ya que su archivo Vegur_300.font.js contiene un comando Cufon.registerFont que contiene el parámetro font-family objeto (en face).

Mientras se estén ejecutando todos los archivos .js de su fuente, Cufon obtendrá la información de registro con los datos de la curva de cada fuente. En cuanto a por qué no funciona para usted, no puedo especular sin más información. ¿Tiene un sitio de muestra arriba?

+2

Gracias Plynx. ¡Problema resuelto! Su respuesta me ayudó a verificar el archivo javascript de la fuente real. Allí vi esta línea: cara ": {" font-family ":" Unidad-MediumLF" así que sabía que poner 'Unidad-MediumLF' en el CSS creo que la documentación realmente debe destacar esto mejor – 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> 

Esto funcionó para mí.

+0

La razón por la que sugiero esto es porque no pude obtener la "respuesta" de arriba para que funcione para mí. – Chris

9

Es muy simple, vamos a suponer que está utilizando 2 familias de fuentes "Segoe de interfaz de usuario" y "Bauhaus 93" y luego colocar los guiones como se muestra a continuación:

<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

cuando se genera la fuente Cufón en their website, se especifica un nombre para ser usado para tu fuente.

Utilice el siguiente valor que la fuente de la familia de la fuente generada (opcional)

Usted tiene que usar ese mismo nombre al llamar Cufon, o no funcionará correctamente. Creo que esa podría ser la razón por la que el reemplazo de tu fuente no funciona. Esa es la forma en que Cufon sabe a qué tipo de letra te refieres cuando haces la llamada a fontFamily.

0

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

El uso de múltiples fuentes

Para utilizar varias fuentes que sólo debe indicar la fuente que desea utilizar y ya está listo:

<!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>