sIFR: como usar tipografías no estándar en páginas web

sIFR: como usar tipografías no estándar en páginas web
A la hora de escoger una tipografía para una página web nos encontramos limitados a una serie de fuentes estándar: verdana, arial, georgia, helvetica, times new roman, y unas pocas más. Cuando elegimos una tipografía para nuestra web, debemos pensar que para que un usuario pueda verla, tendrá que tenerla instalada en su equipo, de lo contrario se sustituirá por aquella que tenga configurada por defecto en su navegador. Son tipografías estándar por que cualquier usuario las tiene instaladas por defecto en su ordenador (sea cual sea su SO).

Si queremos usar una tipografía especial (gótica, handwritten, etc.) solo tenemos dos opciones: bien crear una imagen del texto con photoshop (o cualquier programa de edición de imágenes)  y subirla a la web, o bien crear una regla CSS @font-face, que permite la descarga automática de la fuente en caso de que el usuario visitante no la tenga instalada. Ambos métodos tienen desventajas importantes, en primer lugar, tener que crear una imagen para cada texto de la web puede resultar una tarea tediosa, además de perjudicar al SEO. Además, tenemos el problema de que esta medida sólo sirve para contenido estático, es decir, que no varía. Por otra parte, es probable que tengamos problemas con algunos navegadores al usar @font-face, ya sea por que son antiguos o por que simplemente no lo soportan.

La solución para una página web con contenido dinámico es usar tecnologías sIFR, es decir, mediante JavaScript, CSS, DOM y ActionScript creamos una imagen en tiempo de ejecución (on-the-fly), que nos mostrará una imagen con el texto. Os recomiendo FaceLift, un pequeño script que podemos descargar de forma gratuita.

Más info | FaceLift

Etiquetas:

Suscríbete a nuestro Feed para recibir las últimas novedades de diseño web, diseño gráfico y programación

4 Comentarios hasta el momento »

  1. Plugin sIFR para el Framework jQuery - The n4gash, Blog sobre Diseño gráfico y web, programación, internet, posicionamiento web y SEO dijo

    7 de diciembre del 2008 a las 18:53

    […] ya comenté en una entrada del blog, la tecnología sIFR (Scalable Inman Flash Replacement) nos permite reemplazar el texto en una página web por una imagen u objeto flash. El uso que podemos […]

  2. Las 25 tendencias del diseño web durante el 2009 - The n4gash Blog dijo

    17 de mayo del 2009 a las 22:33

    […] de precios como banner o medio promocional; reemplazar el texto por imagenes o animaciones flash (técnicas sFIR); interfaz similar a la de una revista; utilización de bloques de texto con un formato especial […]

  3. Typekit, utiliza tipografías no estándar en tu página web - The n4gash Blog dijo

    26 de agosto del 2009 a las 10:18

    […] tipografías no estándar en una página web a día de hoy requiere la utilización de tecnologías sIFR, mediante javascript, flash o imágenes. Todo esto cambiará con el atributo @font-face de CSS3, pero hasta que podamos utilizarlo, tenemos […]

  4. @font-face utiliza tipografías no estándar en páginas web con CSS3 – The n4gash Blog - The n4gash Blog dijo

    6 de septiembre del 2009 a las 17:00

    […] más interesantes es @font-face, que nos ofrece una funcionalidad similar a las técnicas sFIR, pero mucho más sencilla, limpia y menos aparatosa. Esta propiedad, que están incorporando en sus […]

Comentarios RSS · TrackBack URI

Dejanos tu Comentario

Nombre: (Requerido)

E-Mail: (Requerido)

Sitio WEB:

Comentario:

What is 13 + 4 ?
Please leave these two fields as-is: