Sucede mucha veces que cuando estamos dise?ando nuestros sitios queremos darle a los titulos un estilo de fuente que no es del sistema y que en consecuencia el usuario que visita el sitio si no tiene esa fuente instalada va a ver ese titulo (o el elemento que fuera) con una fuente 'normal' lo cual hace que el sitio pierda el dise?o original, a continuaci?n te damos un tip para que puedas utilizar cualquier tipo de fuente en tus dise?os webs sin utilizar imagenes, ni saliendose de los estandares webs.

La soluci?n se llama SIFR (Scalable Inman Flash Replacement) ?Que es SIRF y como funciona? SIFR es una mezcla de tecnolog?as (CSS, Flash y Javascript) que reemplaza el texto de la etiqueta indicada (

,

, etc) por un archivo .SWF (Flash) que contiene embebida la fuente que queremos utilizar.

Click aqu? para ver el ejemplo.

?Como creamos el archivo SWF con la fuente embebida?

Antes que nada tenes que descargar el SIFR

Cuando descomprimamos el ZIP vamos a ver un archivo fuente del Flash "sifr.fla", buscamos dentro de la librer?a el item font y le indicamos la fuente que queremos utilizar, luego debemos exportar nuestro movie flash en formato Flash 6.

Bien esta aqu? ya tenemos el SWF con la fuente que queremos utilizar.

NOTA: El paquete SIFR trae unos SWF ya creados si nos gustan esas fuentes podemos utilizar esos archivos.

?Como funciona?

Lo primero que tenemos que hacer es dentro de la etiqueta HEAD insertar dos hojas de estilo...




Estos CSS los utiliza el Javascript que vamos a agregar a continuaci?n para hacer la transformaci?n. Ahora insertemos el Javascript que hace la "magia" ...

Aclaremos que as? como lo escribimos los archivo deben estar en el mismo directorio que la pagina HTML. Bien, ahora creemos la etiqueta con el texto que tendr? la fuente que creamos anteriormente, para esto solo basta agregar dentro del body de nuestra pagina la etiqueta HTML sin nada raro, como hacemos siempre...

Hola este es un ejemplo de SIFR

Y ahora para hacer que ese texto salga con la fuente que queremos tenemos que agregar al final de la pagina, antes de cerrar el body () el siguiente c?digo...

Veamos lo que hace la funci?n replaceElement, en el primer parametro (sSelector) indicamos que elemento va a remplazar, en este caso el

tengamos en cuenta que va a reemplazar todos los

que encuentre en la pagina, si queremos seleccionar un objeto especifico podemos utilizar estas variantes...

• sSelector:"h5#titulo" - Solo modificara el h5 con id igual a "titulo".
• sSelector:"h5.titulo" - Solo modificara los h5 con la clase "titulo".
• sSelector:"h2" - Solo modificara los h2.

El segundo parametro ("sFlashSrc") indica el nombre del SWF donde esta nuestra fuente embebida, el segundo parametro indica el color de la fuente y el ultimo si el fondo es transparente.

Si deseamos aplicar varios estilo podemos hacerlo haciendo llamadas m?ltiples a la funci?n replaceElement...

sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sWmode:"transparent"})); };
sIFR.replaceElement(named({sSelector:"h2#titulo", sFlashSrc:"tradegothic.swf", sColor:"#666666", sWmode:"transparent"})); };

Observaciones generales

Este sistema es compatible con Mac, PC y Linux en los navegadores de ultima generaci?n (IE+5, Safari, Firefox, Opera +7). El peso del archivo SWF la mayor?a de veces es menor a 10k lo cual no indica gran carga para nuestra pagina y en cuanto a la accesibilidad esta totalmente garantizada ya que nuestro c?digo HTML no se modifica para nada, teniendo en cuenta esto ultimo tampoco perdemos palabras claves en los buscadores ya que el c?digo esta totalmente visible.