• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
Sin resultados
Ver todos los resultados

Cufón – Usar cualquier tipografía en una página web

Diego CambiasoporDiego Cambiaso
12/10/2009
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura3 minutos
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

cufon-fonts-for-the-people

Cufón es una solución que permite agregar cualquier tipografía en una página web.

Se trata de un desarrollo bajo licencia MIT que pretende ser una alternativa a sIFR; consiste de dos partes principales, un generador de fuentes y un motor de renderizado (dibujado) en Javascript.

Principales características:

Contenidorelaciondo

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

09/11/2021
  • No es necesario ningún tipo de plugins, sólo utiliza las características soportadas por el cliente.
  • Compatible con los navegador más usados.
  • Es muy sencillo de implementar.
  • Es lo suficientemente rápido para trabajar con textos extensos.

Implementación

Para usar Cufón en nuestros desarrollos primero necesitamos descargar el archivo Javascript.

Luego tenemos que usar el generador online con la tipografía que queremos utilizar para generar las fuentes a incluir en la página web.

Por último enlazar los archivos de las bibliotecas y escribir el código Javascript que implementará la fuente elegida:

<script type="text/javascript" 
src="/public/javascripts/jquery.js"></script>
<script type="text/javascript"
src="/public/javascripts/jquery.equalheights.js"></script>
<script type="text/javascript" 
src="/public/javascripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" 
src="/public/javascripts/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" 
src="/public/javascripts/styleswitcher.jquery.js"></script>
<script type="text/javascript"
src="/public/javascripts/cufon-yui.js"></script>
<script type="text/javascript" 
src="/public/javascripts/Daniel_400-Daniel_700.font.js"></script>
<script type="text/javascript">
Cufon.replace(['h1','h2','h3','div#availability p',
'body#home div#homeintro p','a.pageprevious','a.pagenext',
'body#search legend','div#content_main p.sampurl',
'div#content_main p.more','ul#main_navigation li a'], {
    hover: true
});
$(document).ready(function() {
$("div.sample p.more a,a.group").fancybox({
'zoomSpeedIn': 600,
'zoomSpeedOut': 500,
'overlayShow'                  : true,
'overlayOpacity'               : 0.8,
'frameWidth': 700,
'frameHeight': 450,
'hideOnContentClick': false,
'easingIn': 'easeOutBack',
'easingOut': 'easeInBack'
});
$('div.projects').css({'display' : 'none'});
$('body#search fieldset').equalHeights();
});
$('ul#style-switcher a').styleSwitcher();
</script>

Ver ejemplo: www.acidsmile.co.uk

Cufón

Sitio: cufon.shoqolate.com/generate

Otras lecturas (en inglés):

40 Creative Uses Of Cufón Font Replacement

visual-click

Sitio: spyrestudios.com/cufon-font-replacement

10 wonderful fonts you can embed with Cufon and Sifr

fertigo-font

Sitio: www.catswhocode.com/blog/10-wonderful-fonts-you-can-embed-with-cufon-and-sifr

Tags: CSScufondiseño webemeber fuentesfontsfuentesJavascriptRecursosscriptsifrSoftware libresuar cualquier fuentetipografiasTutoriales
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Contenido Relacionado

Noticias

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022
Recursos

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022
Transformación Digital

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022
Cargar más

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...