Minicápsulas

Sucede mucha veces que cuando estamos diseñando nuestros sitios queremos darle a los títulos 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 título (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 imágenes, ni saliéndose de los estándares webs.

La solución se llama SIFR (Scalable Inman Flash Replacement) ¿Qué es SIRF y como funciona? SIFR es una mezcla de tecnologías (CSS, Flash y Javascript) que reemplaza el texto de la etiqueta indicada (<h1>, <p>, etc) por un archivo .SWF (Flash) que contiene embebida la fuente que queremos utilizar.

Click aquí para ver el ejemplo.

¿Cómo creamos el archivo SWF con la fuente embebida?

Antes que nada tienes 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 hasta aquí, ya tenemos el SWF con la fuente que queremos utilizar.

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

¿Cómo funciona?

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

1
2
3

 
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />

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” …

1
2

 
<script src="sifr.js" type="text/javascript"/>

Aclaremos que así como lo escribimos, los archivos deben estar en el mismo directorio que la página HTML. Bien, ahora creemos la etiqueta con el texto que tendrá la fuente que creamos anteriormente, para esto sólo basta agregar dentro del body de nuestra página la etiqueta HTML sín nada raro, como hacemos siempre…

1
2

 
<h1>Hola este es un ejemplo de SIFR</h1>

Y ahora, para hacer que ese texto salga con la fuente que queremos, tenemos que agregar al final de la página, antes de cerrar el body (</BODY>) el siguiente código…

1
2
3
4
5
6
7

<script type="text/javascript">
<![CDATA[
  if(typeof sIFR == "function"){
  sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000",   sWmode:"transparent"}));  
 };
 //]]>
</script>

Veamos lo que hace la función replaceElement, en el primer parámetro (sSelector) indicamos que elemento va a reemplazar, en este caso el <h1> tengamos en cuenta que va a reemplazar todos los <h1> que encuentre en la página, sí queremos seleccionar un objeto específico podemos utilizar estas variantes…

1
2
3
4
5

<ul>
  <li>sSelector:"h5#titulo" - Sólo modificará el h5 con id igual a "titulo".</li>
  <li>sSelector:"h5.titulo"  - Sólo modificará los h5 con la clase "titulo".</li>
  <li>sSelector:"h2" - Sólo modificará los h2.</li>
</ul>

El segundo parámetro (“sFlashSrc”) indica el nombre del SWF donde está nuestra fuente embebida, el segundo parámetro indica el color de la fuente y el último sí el fondo es transparente.

Sí deseamos aplicar varios estilos, podemos hacerlo haciendo llamadas múltiples a la función replaceElement…

1
2
3
4

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"})); };
 
<strong>Observaciones generales </strong>

Este sistema es compatible con Mac, PC y Linux, en los navegadores de última 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 página y en cuanto a la accesibilidad está totalmente garantizada ya que nuestro código HTML no se modifica para nada, teniendo en cuenta esto último tampoco perdemos palabras claves en los buscadores ya que el código esta totalmente visible.