Facelift es una librería PHP/Javascript que permite reemplazar dinámicamente textos por imágenes, con lo cual podemos mostrar cualquier tipografía en nuestra web. Esto permite que los usuarios puedan ver texto con tipografías especiales mientras que los buscadores interpretarán este contenido como texto plano con lo cual mantenemos nuestro sitio optimizado para los buscadores.
Utilizando Facelift
Facelift consta de un javascript que se encarga de reemplazar un texto por una imágen que es generada dinámicamente por un PHP en el servidor. Para utilizar esta librería primero descargamos la ultima versión, extraemos los archivos y copiamos el contenido en una carpeta llamada ‘flir‘ de nuestro servidor.
Configurar las Fuentes
A continuación configuramos la librería en donde incluimos las tipografías que utilizaremos, para ello editamos el archivo config-flir.php en donde colocamos la lista de tipografías disponibles.
$fonts = array(); $fonts['wanta'] = 'wanta_091.ttf'; $fonts['aorange'] = 'AgentOrange.ttf';
Estas tipografías deben estar en la carpeta fonts y en formato .ttf, puedes encontrar fuentes gratuitas para descargar en http://www.webpagepublicity.com/free-fonts.html .
Configurar el HTML
El siguiente paso es incluir el archivo flir.js en el header de nuestro html
<script src="flir/flir.js" type="text/javascript"></script>
Luego aplicamos Facelift, para ello definimos la carpeta donde se ubica la librería y a continuación asignamos las tipografía utilizando el método FLIR.replace en donde definimos a que elementos del html se aplicarán.
<script type="text/javascript">
FLIR.init( { path: 'flir/' } );
FLIR.replace( 'h2', new FLIRStyle({ cFont:'aorange' }) );
FLIR.replace( 'h3', new FLIRStyle({ cFont:'wanta' }) );
</script>
Este código lo colocamos justo antes del tag </body>. En el ejemplo estamos asignando a todos los elementos h2 la tipografía Agent Orange y a los elementos h3 la fuente Wanta 091.
Personalizando los Textos
Para cambiar el tamaño, color y alineación de los textos generados lo podemos hacer mediante estilos, para ello creamos los CSS de acuerdo a nuestras necesidades, para nuestro ejemplo podríamos tener:
h2 {
font-size: 24px;
color: #06C;
}
h3 {
font-size: 15px;
color: #C06;
}
Uniendo Todo
Uniendo todos estos elementos tendríamos el siguiente código para generar nuestras imágenes dinámicamente. El resultado del ejemplo lo pueden ver en http://samples.unijimpe.net/facelift/.
<html>
<head>
<title>Facelift Demo</title>
<script src="flir/flir.js" type="text/javascript"></script>
<style type="text/css">
<!--
h2 {
font-size: 24px;
color: #06C;
font-weight: bold;
}
h3 {
font-size: 15px;
font-weight: bold;
color: #C06;
}
-->
</style>
</head>
<body>
<!-- contenido html -->
<script type="text/javascript">
FLIR.init( { path: 'flir/' } );
FLIR.replace( 'h2', new FLIRStyle({ cFont:'aorange' }) );
FLIR.replace( 'h3', new FLIRStyle({ cFont:'wanta' }) );
</script>
</body>
</html>
Con esto tenemos nuestra pagina personalizada con las fuentes que nosotros deseamos, eso te traduce en una web con mejor calidad visual si perder la optimización para los buscadores
[download id=»30″ autop=»false»]
Comentarios Total 6 comentarios
Publicado: 23/10/2009 2:11 am
Bueno, yo uso en todos mis sites jQuery, y para este framework funciona de maravilla el plugin PIR. Ved un ejemplo aquí funcionando:
http://gruporetohermosilloac.com
Un saludo!
SERGI
Publicado: 23/10/2009 3:52 am
@font-face
Lo mas comodo… y si no se ve en IE que se jodan xD
Publicado: 23/10/2009 11:21 pm
buena libreria…gracias
CAOS30: lamentablemente jquery.pir.js no funciona bien en IE6 T_Taun hay un buen porcentaje de «tristes» que usan IE6…asi que caballero pex.
Publicado: 26/10/2009 1:37 pm
mmm debere reformar alguna cosa para probarlo, epro vale la pena.
Muchas Gracias
Publicado: 19/02/2010 10:48 am
hola gente. comenteo que no me funca en IE7 tampoco. y me tira un error..
caos30 ? donde bajo el pir? lo busque por todos lados y no encuentro
saludos!
Publicado: 11/03/2010 10:39 am
Hola a todos!
Estoy utilizando Facelift, en un server funciona perfectamente, pero en local no me funciona… utilizo EasyPHP.
La principal diferencia cuando hago un phpinfo es que en el servidor donde me funciona en la librería GD aparece:
T1Lib Support enabled, mientras que en el phpinfo del local no.
Alguien tiene idea para solucionarlo?