18
Jul
2011
chechar

El bello Cufón

Categoría: 
Geekeando

Mientras están navegando en internet, ¿alguna vez han notado como que las letras cambian de estilo cuando se está cargando la página? ¿o sea han fijado que hay porciones de texto que no se comporta como tal ni tampoco como imagen? Esto se debe al "cufón".

Cufón es una herramienta escrita en JavaScript que permite "renderear" texto para que aparezca con el aspecto que nosotros deseemos. Consiste en partes individuales: un generador de fuentes (que permite convertir el texto en un formato deseado) y un motor de render (que obviamente hace la conversión). Cufón tiene cuatro puntos a su favor:

  1. No require plug-ins.
  2. Es compatible con la mayoría de los navegadores comerciales.
  3. Facilidad de uso (no require configuración inicial)
  4. Rapidez en la conversión del texto.

Usar cufón en nuestras páginas de internet es muy fácil. Primero debemos de conseguir el motor cufon-yui.js y colocarlo dentro de la carpeta js. Después hay que conseguir las fuentes que queramos usar (en este caso usaremos Slant, Starnberg y TradeGothic), las cuales vienen en archivos con extensión .js. Una vez teniendo estos archivos, hay que agregarlos en el HEAD del archivo html (o cualquiera de sus variantes) de la siguiente manera:

<script language="javascript" type="text/javascript" src="js/cufon-yui.js"></script> 
<script language="javascript" type="text/javascript" src="js/Slant_500.font.js"></script> 
<script language="javascript" type="text/javascript" src="js/Starnberg_400.font.js"></script> 
<script language="javascript" type="text/javascript" src="js/TradeGothic_LT_400.font.js"></script> 

Después, dentro del mismo HEAD, hay que declarar un estilo diferente css por cada fuente distinta que vayamos a usar, y a cada estilo se le asigna una fuente específica con el tag fontFamily. En este caso vamos a declarar 3 distintos encabezados:

<script type="text/javascript"> 

Cufon.replace('h1', {fontFamily:'Slant'});
Cufon.replace('h2', {fontFamily:'Starnberg'});
Cufon.replace('h3', {fontFamily:'TradeGothic LT'})
</script> 
 
<style> 
h1 { font-size:30px; }
h2 { font-size:30px; }
h3 { font-size:30px; }
</style> 

Y por último, agregamos el texto que queremos que aparezca y lo encerramos entre las etiquetas de css/html que queramos asignarle según el tipo de fuente deseado:

<h1>Este texto esta escrido con la fuente 'Slant'</h1> 
<h2>Este texto esta escrito con la fuente 'Starnberg'</h2> 
<h3>Este texto esta escrito con la fuente 'TradeGothic LT'</h3> 

Y voilá! Cuando abramos nuestra página cada línea de texto aparecerá con un estilo de letra distinto.

A continuación están los archivos necesarios para poder usar cufón, 3 fuentes de ejemplo y el ejercicio que acabamos de hacer.

Archivos:
cufon.htm - este es el ejercicio mostrado arriba.
js/cufon-yui.js - este es el motor cufón.
js/Slant_500.font.js - la fuente Slant.
js/Starnberg_400.font.js - la fuente Starnberg.
js/TradeGothic_LT_400.font.js - la fuente TradeGothic.

Post new comment