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.

Bookmark and Share
aaa

Ningún comentario

Aún no hay comentarios.

Tienes que estar conectado para publicar un comentario.

Comentarios RSS Feed   TrackBack URL