SIFR es una libreria que nos permite el uso de cualquier tipografía en un sitio web, independientemente de que el usuario la tenga o no instalada en su equipo.
Esta solución(Scalable Inman Flash Replacement) utiliza CSS, javascript y flash para reemplazar el texto de una determinada etiqueta por una animación flash que contiene la tipografía a utilizar.
Los pasos para hacer uso de la libreria son los siguientes:
1.- Decargaremos la libreria SIFR de la siguiente url:
www.mikeindustries.com/blog/sifr/2.- Descomprimiremos el fichero descargado en la carpeta correspondiente
3.- En nuestra página especificaremos las hojas de estilo que utilizaremos con la librería
sIFR-screen.css
sIFR-print.css
4.- Insertaremos el código javascript para hacer uso de la librería
script src="sifr.js" type="text/javascript"
5.- Exportar el fichero sfir.fla a .SWF
Abriremos el fichero .fla y modificaremos el contenido necesario. Para proceder a su exportación seleccionaremos:Archivo > Exportar
Para llevar a cabo este proceso de exportación, los siguiente ficheros deberán estar en la misma carpeta que el fichero sfir.fla, pero no tendremos que subirlos al servidor:
- customize_me.as (fichero ActionScript)
- dont_customize_me.as (fichero ActionScript)
6.- Configuración de sIFR
Podemos modificar el comportamiento de la libreria mediante la asignación de un valor booleano a determinadas propiedades. Este proceso podemos llevarlo a cabo en una función javascript.
if(typeof sIFR == "function"){
sIFR.bHideBrowserText = false;
sIFR.setup();
};
Mediante el código anterior, indicamos que el texto a mostrar se muestre durante la carga de la librería.
7.- Reemplazar la fuente
Para proceder al reemplazo de la fuente deseada, llamaremos al método:
sIFR.replaceElement
Para la llamada al método debemos pasar una serie de parámetros en el orden indicado:
- sSelector. Selector utilizado para reemplazar las clases CSS
- sFlashSrc. Ruta del fichero swf
- sColor. Color
- sLinkColor. Color del enlace
- sHoverColor. Comportamiento del "hover" del enlace
- sBgColor. Color de fondo
- nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft. Espaciado
- sFlashVars. Variables adicionales pasadas al flash
- sCase. Paso a mayúsculas o minúsculas
- sWmode. Transparencia
if(typeof sIFR == "function"){
sIFR.replaceElement("titulo", named({sFlashSrc: "./netic360.swf", sColor: "#DCDCDC", sCase: "upper"}));
};
Más información:
www.mikeindustries.com/blog/sifr
