Cufón. Usar fuentes no estándar. – Forex – Criminal

Cufón es una alternativa asIFR, que es uno de los sistemas más extendidos para el reemplazo de fuentes. A diferencia de este, Cufón no usa flash, sino SVG (gráficos vectoriales) y es mediante un JavaScript, como se reemplazan los caracteres de la fuente original.

Como casi siempre, antes de seguir podeis ver unapágina de ejemplo para que considereis si os interesa aplicar este sistema en vuestra web.

Aún siendo algo farragosa, su instalación no es nada complicada. En primer lugar, hay quedescargar el script que realiza la tarea de sustitución y subirlo a nuestro espacio. Luego, conesta aplicación online, hay que convertir la fuente deseada en otro fichero .js que contendrá las instrucciones necesarias para generar los SVG. Igualmente lo alojamos en nuestro sitio. Por último, generamos el código en la página usando las direcciones de los dos ficheros .js:

html
head
script src="http://DIRECCION/cufon-yui.js" type="text/javascript"/script
script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"/script
script type="text/javascript"
Cufon.replace('h1');
/script
/head
body
h1Este texto se verá con la fuente Impossiblefont/h1
/body
/html

En este ejemplo, se ha usado el tagH1 para sustituir sólo lo que se encuentre dentro de él. Si quereis que la sustitución se realice para toda la página, habrá que utilizarBODY. Si quereis que sea en un div concreto, tendreis que utilizar algúnID pre-existente o que incluyais ahora para estos efectos (#outer-wrapper,#main,#sidebar... etc.). Haced pruebas antes de decidiros por sustituirla página entera, porque este cacharrito demora bastante la carga de la página.

Por cierto que en IE (cómo no...), en ocasiones se visualiza el texto original antes de realizar la sustitución, lo que provoca un efecto que queda regular. Para atenuar -que no solucionar- esto, justo antes de/body es conveniente insertar esta instrucción:

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

No me he metido demasidado a fondo en todas las opciones, pero para generar el fichero de la fuente (variante vectorial) en la aplicación decufon.shoqolate, al menos tenemos que tener en cuenta lo siguiente:

Regular typeface: Aquí es desde dónde subimos la fuente original. Los otros campos son para varianes de negrita, itálica y negrita+itálica que pudieran existir de la misma fuente.
The EULAs of these fonts allow Web Embedding (without Adobe Flash): Tenemos que seleccionar que estamos autorizados a usar la fuente original para que el programa nos permita hacer la conversión. En este sentido, recordar un par de alternativas donde podeis encontrar fuentes libres.
Include the following gliphs...: Aunque recomiendan marcar "All", eso hace mucho más pesado el fichero resultante. Con Basic Latin yo obtuve unos resultados muy aceptables. De todos modos, cualquiera de los tres siguientes (Latin-1 Supplement, Latin Extended-A y Latin Extended-B) deberían demorar menos la carga, cubriendo la gran mayoría de los casos. Comentar también aquí, que muchas fuentes son de origen no castellano, por lo que normalmente no tienen previstos los caracteres vocálicos acentuados... y casi nunca la ñ. Comprobadlo antes de poneros a hacer conversiones y os ahorrareis trabajo.
Scale the font to the following size: Cuanto mayor sea el número, mayor fidelidad de fuente incluso en caracteres de gran tamaño. Si no lo vais a utilizar para rótulos gigantes, mejor escogeis el valor mínimo (64). Esto reduce bastante el tamaño del script.
I acknowledge and accept these terms: Imprescindible aceptar los términos de uso par generar el fichero.
Por lo general, el resto de opciones que vienen por defecto se pueden dejar tal cual salen.

Más cosas... Puede que queramos utilizar varias fuentes sustitutivas. En este caso y como es lógico, en primer lugar todas ellas tienen que pasar por la previa transformación a SVG. Luego, la llamada a cufon.js cambia un poco:

script src="http://DIRECCION/cufon-yui.js" type="text/javascript"/script
script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"/script
script src="http://DIRECCION/Otrafont_700.font.js" type="text/javascript"/script
script type="text/javascript"
Cufon.replace('h1', { fontFamily: 'Imposiblefont' });
Cufon.replace('h2', { fontFamily: 'Otrafont' });
/script

En este ejemplo, todo lo contenido entre etiquetasH1 se cambiará a la fuenteImposiblefont y lo que esté entreH2, aOtrafont. Se puede sustituir cualquierID que utilicemos en nuestra plantilla, para lo cual ya habría que incluir la almohadilla:

...
Cufon.replace('#footer-wrapper', { fontFamily: 'Imposiblefont' });
Cufon.replace('#especial', { fontFamily: 'Otrafont' });
...

Problemas conocidos, consultas frecuentes y más detalles técnicos enGitHub y para dentro de unos días, unBPT para instalar todo esto en Blogger sin tener ni idea ;).

Actualización: BPT. Instalar Cufón en Blogger.

CosasParaMiBlogs

martes, 26 de enero de 2010

Cufón. Usar fuentes no estándar. – Forex – Criminal – Miami

Popular Posts

Blogger news

Labels

Blog Archive