22
Jun

Cufón, reemplazo de texto dinámico.

Cufón aspira a convertirse en una buena alternativa a sIFR, consta de dos partes:
Un generador de fuentes que convierte las fuentes a un formato propietario y un motor de renderizado escrito en JavaScript, es decir, mediante canvas.

Modo de empleo:
- Añadimos la librería cufon-yui.js en nuestro head.
- Nos dirigimos al generador de fuentes (Importante: Las fuentes tienen que ser formato True Type).
- Seleccionad vuestra fuente e incluimos los diferentes “glyphs” que necesitéis.
- Envíamos el formulario y automaticamente se generará un script para descargarlo.
- Añadir esa librería en vuestro head (Importante: Añadirlo justo después de la librería cufon-yui.js).

Para reemplazar el texto, añadimos lo siguiente en el head:

<script type="text/javascript">
	Cufon('h1'); //Esto reemplazará el contenido del h1 por la tipo que hayamos añadido.
</script>

Si queremos utilizar más de una tipo en nuestra web tendremos que hacer todos los pasos anteriores, es decir, añadir todos los scripts en el head y seguidamente añadir esto otro:

<script type="text/javascript">
	Cufon.replace('h1', {fontFamily:'Slant'});
	Cufon.replace('h2', {fontFamily:'Starnberg'});
</script>

Nota: Si utilizáis jQuery, podréis seleccionar más de un elemento de este modo:

<script type="text/javascript">
	Cufon.replace('h1, h3, .capaElemento', {fontFamily:'Slant'});
	Cufon.replace('h2, p, #otraCapa', {fontFamily:'Starnberg'});
</script>

Podéis ver un ejemplo: aquí.
Existe una wiki de cufón para los que quieran saber más.