Editar

<div> <p>Cufón es una librería JavaScript que te permite insertar de manera limpia cualquier tipografía en una página web, reemplazando mediante JavaScript los textos indicados por imágenes, con la única desventaja de que será dificil seleccionar el texto reemplazado y en consecuencia es casi imposible copiarlo al portapapeles.</p> <p>En este tutorial aprenderás cómo usar cufón, algunas recomendaciones y ejemplos reales donde lo hemos utilizado. Vamos por lo primero:</p> <h2>1. Obtener los archivos de cufón</h2> <p>Cufón funciona con 2 archivos:</p> <ol> <li>La librería cufón</li> <li>Un archivo js que incrusta tu fuente y que se genera en la página oficial de cufón.</li> </ol> <h3>1.1. La libería cufón</h3> <p>En el <a href="http://cufon.shoqolate.com">sitio oficial de cufón</a> puedes descargar la última versión de cufón, y en estos momentos la última versión es la 1.09i que puedes <a href="http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i">descargar directamente desde este enlace</a>.</p> <h3>1.2. Tu archivo con tu fuente incrustada</h3> <p>El <a href="http://cufon.shoqolate.com/generate/">generador de cufón</a> te permite crear el archivo. Es fácil seguir el proceso, aquí va una imagen explicativa de cómo generar tu archivo:</p> <p><img src="../../imagenes/uso-cufon.jpg" alt="Uso de Cufón" width="680" height="2905" /></p> <p>Luego de rellenar las opciones correctamente y aceptar los términos, dale al botón celeste "Let's do this!" y se generará y descargará tu archivo con la fuente incrustada.</p> <p><strong>Recomendaciones</strong>:</p> <ul> <li><strong>No uses más de una variante de la misma fuente</strong>: Si al generador le entregas las variantes de fuente <em>Bold</em>, <em>Italic </em>y <em>Bold Italic</em>, el archivo generado pesará 4 veces más aproximadamente. Es recomendable que sólo uses la variante <strong>Regular </strong>de la fuente, de esta forma, sólo pesará lo mínimo (15 a 40 kb, dependiento de tu fuente).</li> <li><strong>Agrega caracteres especiales </strong>como los latinos con tildes cómo "áéíóúüÑñ" y los carácteres para abrir exclamación "!" y abrir interrogación "¿" que no están considerados en los packs de caracteres seleccionados del ejemplo.</li> <li>Si usas una fuente comercial, en el cuadro "Security" agrega el dominio en donde se usará la fuente, de esta forma, sólo funcionará ahí y en ninguna parte más.</li> </ul> </div> <h2>2. Incrustar cufón</h2> <p>Debes incrustar ambos archivos descargados de cufón en el <head> de tu html, de la típica forma:</p> <pre><span><script <span>type</span>="<span>text/javascript</span>" <span>src</span>="/ruta/cufon.js"></span><span></script><br /></span><span><script <span>type</span>="<span>text/javascript</span>" <span>src</span>="/ruta/cufon.nombredetufuente.js"></span><span></script></span></pre> <p>Y listo. Si eres más pro, me imagino que se te ocurrirá unificar estas librerías junto a otras como jquery para que no existan tantas peticiones http.</p> <h2>3. ¡Cufón cobra vida!</h2> <p>Con este pequeño código le darás vida a cufón, indicándole sólo la etiqueta que quieres que reemplaze: </p> <pre>Cufon.replace('h1');</pre> <p>Varias etiquetas:</p> <pre>Cufon.replace('h1, h2, h3');</pre> <p>Soportando hasta con identificadores o clases del html:</p> <pre>Cufon.replace('ul#menu li a, #sidebar h3, p.marcar');</pre> <p>Con sombras:</p> <pre>Cufon.replace('#menu a',{ textShadow: '1px 1px #17232b' });</pre> <p>O incluso sombras + efecto hover:</p> <pre>Cufon.replace('#menu a',{ textShadow: '1px 1px #17232b', hover: { color: '#CCC' } });</pre> <p>Todo eso se deja a tu creatividad :).</p> <p>Si Internet Explorer se retrasa un poco al reemplazar los textos, puedes probar insertar al final del código cufon.now(); o incluso situarlo al final de </body>. Ejemplo:</p> <pre>...<br /><br /><script type="text/javascript"><br /><br />Cufon.replace('h1',{textShadow:'1px 1px #000'});<br />Cufon.replace('h2, h3, #menu, #sidebar h3, #sidebar span');<br />Cufon.replace('#sidebar a',{ hover: { color:"#FFF" } });<br />Cufon.replace('#texto h2, #texto h3',{textShadow:'1px 1px #17232b'});<br />Cufon.now();<br /><br /></script><br /><br /></body><br /></html></pre> <p><strong>Recomendación final</strong>:</p> <ul> <li><strong>Usa cufón con cuidado</strong>, recuerda que es dificil seleccionar textos reemplazados por imágenes y por lo tanto dificil copiarlos. Es recomendable sólo utilizarlo en títulos o textos que no interfieran tanto con la interacción de ellos por parte del visitante.</li> </ul> <h2>Ejemplos reales usando Cufón</h2> <p>Algunos sitios desarrollados con <a href="http://habitatweb.mx/">HábitatWeb</a> en los que hemos usado cufón son los siguientes:</p> <ul> <li><a href="http://www.camasdebronceado.com/">camasdebronceado.com</a></li> <li><a href="http://conseguridad.com.mx/">conseguridad.com.mx</a></li> <li><a href="http://exactoacuacorte.mx/">exactoacuacorte.mx</a></li> <li><a href="http://www.infuzion.mx/">infuzion.mx</a></li> </ul> <p><span style="color: #444444;">Si desean, pueden investigar en su código fuente cómo lo hemos insertado :)</span></p> <p>Muchos saludos, espero que el tutorial se disfrute y sea bastante claro.<br />Tutorial pedido por <a href="http://twitter.com/iadrian20">@iadrian</a>.</p>

o salir

Editar

Editar últimas publicaciones

Create una cuenta.

O accede si tienes una.