sIFR: Tipografías en HTML

sIFR (Scalable Inman Flash Replacement) es una técnica que permite reemplazar elementos de texto HTML por un equivalente en Flash lo cual permite la inclusión de cualquier tipografía aun si el usuario no tiene instalada la tipografía en su computador.

Utilizando sIFR
Lo primero es descargar sIFR 3, extraemos los archivos donde tenemos una carpeta flash donde encontramos un archivo sifr.fla el cual debemos abrir en Adobe Flash y cambiar el tipo de letra, seleccionar los caracteres a renderear e incluso podríamos agregarle algunos filtros. Guardamos los cambios y exportamos el archivo. A este archivo recién exportado le damos un nombre, generalmente el nombre de la tipografía seleccionada.

Luego el siguiente paso es incluir los archivo sIFR-screen.css y sIFR-print.css ubicados en la carpeta css en el header del HTML seleccionado:

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

Luego de ello es necesario incluir el archivo javascript sifr.js.

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

El tercer y ultimo paso es utilizar el metodo sIFR.replace para reemplazar bloques html por bloques flash que contienen la tipografía seleccionada, la sintaxis para ello es:

  1. sIFR.replace({
  2.     src: 'path-font.swf',  // ruta al swf que contiene la fuente
  3.     selector: 'html-tag',  // tags a reemplazar
  4.     css: '.sIFR-root { prop: value }' // CSS para el flash
  5. });

Entonces si por ejemplo hemos creado un archivo llamado monotype.swf y queremos que lo reemplaze a todos los elementos h1, podemos hacerlo mediante:

  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'monotype.swf',
  4.     selector: 'h1'
  5. });

Luego si deseamos que estos elementos tengan color #FF3366 y que tengan 24px de tamaño, agregamos la propiedad css, de la siguiente manera:

  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'monotype.swf',
  4.     selector: 'h1',
  5.     css: '.sIFR-root {color: #FF3366; font-size: 24px; }'
  6. });

Ahora si por ejemplo deseamos reemplazar los elementos que tengan la clase blue por la tipografía bookman.swf y la queremos en tamaño 14px podemos utilizar:

  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'bookman.swf',
  4.     selector: '.blue',
  5.     css: '.sIFR-root {color: #0099FF; font-size: 14px;}'
  6. });

Podemos utilizar varias veces el método sIFR.replace para reemplazar diferentes tipos de letra. Ahora uniendo todos los elementos en un html tenemos el siguiente código, en donde hemos utilizar el método de reemplazo en una sola línea cada una:

  1. <title>Demo sIFR</title>
  2. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
  3. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">
  4. <script type="text/javascript" src="sifr.js"></script>
  5. <script type="text/javascript">
  6. sIFR.replace({ src: 'monotype.swf', selector: 'h1', css: '.sIFR-root {color: #FF3366; font-size: 24px; }' });
  7. sIFR.replace({ src: 'bookman.swf', selector: '.blue', css: '.sIFR-root {color: #0099FF; font-size: 14px;}', forceSingleLine: true, tuneHeight: -9 });
  8. </head>
  9. <h1>sIFR: Tipografías en HTML</h1>
  10. <p><span class="blue">sIFR</span> (<em>Scalable Inman Flash Replacement</em>)...</p>
  11. </body>
  12. </html>

Pueden ver el resultado de este ejemplo en Demo sIFR. Les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan hacer sus pruebas.

Como una observación importante hay que notar que este método es recomendable utilizarlo solo para bloques pequeños y no para todo el html.

Mas Información

Comentarios Total 12 comentarios


Lackfer®
Publicado: 31/05/2008 11:13 pm

si, es muy buena esa tecnica, yo la uso en mi blog :D

en la barra lateral (sidebar)

saludos.!

sIFR -Tipografia | RuanWeb
Publicado: 12/06/2008 7:15 pm

[…] Via: unijimpe […]

JULIO CESAR VILLALPANDO CASTRO
Publicado: 20/06/2008 12:59 pm

UNA PREGUNTA CUANDO SE MANDA UN COMENTARIO COMO ESTE EN DONDE SE LEE O COMO TE INDICAN QUE TE A LLEGADO UN COMENTARIO

Derleth
Publicado: 01/07/2008 10:22 pm

descargue el demo y no me funciona localmente, sera porque tengo flash 8 ??


[…] SIFR en las cabeceras […]

Gabriela
Publicado: 19/03/2009 10:34 am

Hola, quería saber si habia alguna forma de indicarle el color al texto en el css y no en el js??
Saludos!

etzekiel
Publicado: 11/04/2009 1:42 pm

mmm… donde puedo leer algo sobre: tuneHeight y forceSingleLine y otras cosas similares…

etzekiel
Publicado: 11/04/2009 1:43 pm

ups! ya vi… gracias…

klauxen
Publicado: 22/09/2009 2:31 pm

Hola que tal buscando varios tutoriales, encontre el tuyo y me ayudo bastante, concreto y sencillo…

grax

Christian
Publicado: 26/09/2009 1:56 pm

Oye, he bajado los archivos que tienes para la descarga, y no he podido abrir el .fla y tengo el Flash Professional 8, que puede ser?

unijimpe
Publicado: 26/09/2009 3:45 pm

Hola, los ejemplos fueron hechos en Adobe Flash CS3 o el equivalente a Flash 9, es por ello que no lo puedes abrir.


[…] Usando sIFR: http://blog.unijimpe.net/sifr-tipografias-en-html/ […]

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)