En el diseño de una página web hay algún momento en el que queremos utilizar cierta fuente para un título o un texto destacado, pero html no dispone de ella. Antiguamente se utilizaban imágenes con el texto que queríamos mostrar, pero actualmente podemos reemplazar el texto “al vuelo” con la reducción de trabajo que ello supone. Una de éstas técnicas es Cufón, basada en javascript nos permite además de reemplazar fuentes, añadir efectos al texto (no disponibles en css2).
Ventajas:
- No necesita plugins instalados en el navegador.
- Es compatible con la mayoría de navegadores del mercado.
- Es rápido. Puede reemplazar grandes téxtos rápidamente.
- Es fácil de instalar (lo vemos ahora mismo).
Instalando Cufón
- Descarga cufón y añádelo a tu proyecto:
<script src="cufon-yui.js"
type="text/javascript"></script> - Convierte a cufón la fuente que quieres utilizar, si tu proyecto es en español no te olvides de los acentos, “eñes”, etc…
- Añade el .js de la fuente y empieza a utilizar cufón de la siguiente manera:
<script src="cufon-yui.js"
type="text/javascript"></script><script src=”Myriad.font.js”
type=”text/javascript”></script><script type=”text/javascript”>
Cufon.replace(‘h1′);
</script>
- Disfruta….
Utilizando múltiples fuentes
Puedes utilizar más de una fuente a la vez en tu proyecto. Para ello toma nota de éste ejemplo:
<script src="cufon-yui.js"
type="text/javascript"></script><script src=”Helvetica.font.js”
type=”text/javascript”></script><script src=”Myriad.font.js”
type=”text/javascript”></script><script type=”text/javascript”>
Cufon.replace(‘h1′, { fontFamily: ‘Helvetica’ });
Cufon.replace(‘h2′, { fontFamily: ‘Myriad Pro’ });
</script>
Etiquetas: fuente, HTML, javascript, Qufón
