Cufón

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>