28 mayo, 2010

Cufón: Remplazo de textos con Canvas y VML

Bueno, en esta oportunidad les explico como utilizar fuentes tipo TTF en una web sin utilizar plugins, flash ni imágenes. Esta técnica es la que actualmente utilizo para que los títulos de los posts de mi sitio, se vean así tan bonitos. Basta de introducción y vamos a la práctica.

Antes de empezar, hay que saber que:

No se requieren plugins – utiliza caracteristicas nativas soportadas por el cliente
Compatible – funciona con la mayoria de los exploradores en el mercado
Facil de utilizar – no es necesario grandes configuraciones
Rapidez – es rápido, inclusive para grandes cantidades de texto.

Si les parece interesante, continuen leyendo.

Cufón consiste de dos partes individuales:

Un generador de fuentes, con el cual al final se genera un archivo JS que nos va a permitir incluir la fuente con las etiquetas <script>
El renderizado, el cual consiste de 3 partes mas complicadas que va a permitir renderizar la fuente.

Entonces ahora vamos a lo que les importa.

Descargamos el archivo cufon-yui.js y lo guardamos en la PC.
Buscamos la fuente TTF deseada y la guardamos en nuestra PC.
Generamos el archivo JS con las opciones deseadas y lo guardamos en la PC.

A estos 3 archivos los guardamos en un una carpeta para luego llamarlos desde las etiquetas <head> de nuestro archivo index.

<script src="js/cufon/cufon.js" type="text/javascript"></script>
<script src="js/cufon/Aarvark_Cafe_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
   Cufon.replace('h1.post-title');
</script>

La función Cufon.replace() es la que indica que etiquetas reemplazar con la fuente seleccionada. Lo único que quedaría es escribir, dentro de <body>, nuestro texto:

<body>
<h1 class="post-title">Titulo con fuente TTF</h1>
<p>Texto solo de prueba...</p>

<h1 class="post-title">Noticia de prueba con fuente TTF</h1>
<p>Texto solo de prueba...</p>
</body>

Con IE, hay un pequeño problemilla… hay un pequeño retrazo antes de que se muestren las fuentes. Para esto, Cufón tiene la solución. Luego de la etiqueta <body>, y de cualquier otro script como el de Google Analytics, hay que insertar la siguiente sentencia JS:

<script type="text/javascript"> Cufon.now(); </script>

También se pueden utilizar varias fuentes repitiendo el paso 2 y 3 (buscar la fuente y generar el archivo JS):

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

Si siguieron bien los pasos, ya deberían ver los textos reemplazados con las fuentes seleccionadas.

El documento original lo pueden encontrar acá (inglés)

Es bastante sencillo… con tan solo algunos pasos ya estará funcionando… si es que siguieron bien los pasos.

Consultas o sugerencias, pueden dejarlo adjunto a este post con sus comentarios.

Hasta la próxima!

Relacionados: canvas, javascript, true type fonts, vml