Gilder/Levin, PHARK, FIR, FLIR, CUFON, sIFR, Google Web Fonts, Typekit: Métodos CSS para usar tipografías no-estandar en diseños web
La tipografía que se utiliza para la imagen corporativa y el diseño es fundamental. Los diseñadores Web se encuentran con un problema de fuente que si no son compatibles con el navegador o el equipo mismo del usuario no se verán como previsto.
Ilustración Web Fonts. De: http://creativethemesdesign.com
Métodos de sustitución de texto html por una imagen:
Método de sustitución de texto html por una imágen Gilder/Levin
Consiste en introducir un elemento <span> como hijo del elemento de texto (<h1> , por ejemplo). Mediante CSS y la propiedad <position> se coloca la imagen como <background-image> de <span> y se posiciona encima del texto.
http://www.ehow.com/how_2224447_use-gilderlevin-image-replacement-headings.html
Método de sustitución de texto html por una imágen PHARK
En este método se usa la propiedad text-indent (sangría) para desplazar el texto y dejar ver la imágen de fondo (background-image) en su lugar
http://www.domedia.org/oveklykken/css-image-replacement.php
Método de sustitución de texto html por una imágen FIR
En este caso se ensucia un poco el código HTML ya que se debe encerrar el texto que queramos ocultar entre las etiquetas <span> para luego ocultarlo mediante CSS con la propiedad display: none;. Así se oculta el hijo <span> sin afectar al padre. Y la imagen sigue viéndose pues está como background-image del elemento padre.
http://en.wikipedia.org/wiki/Fahrner_Image_Replacement
Métodos de sustitución de fuentes
Método FLIR (Facelift Image Replacement): Usa cualquier tipografía en tus diseños web
Está técnica usa un script PHP que llama a las fuentes que habremos subido al servidor previamente. Para poder probarlo en tu ordenador local tendrás que instalar XAMPP para que funcione PHP (Descargar Xampp y Tutorial de Instalación de Xampp)
- Video de introducción a la técnica FLIR: http://css-tricks.com/video-screencasts/54-introduction-to-flir/
- Tutoriales completos de cómo aplicar la técnica FLIR:
Método CUFON
Trabaja con Javascript.
- Cufón. Usar fuentes no estándar: http://oloblogger.blogspot.com/2010/01/cufon-usar-fuentes-no-estandar.html
- Cufón: Reemplazo de texto dinámico http://dixso.net/javascript/cufon-reemplazo-de-texto-dinamico/
Método sIFR
Funciona con Flash.
- Qué es sIFR http://es.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement
- Usando sIFR: http://blog.unijimpe.net/sifr-tipografias-en-html/
Algunos artículos de opinión y comparativa sobre las diferentes técnicas CSS:
- Cufon vs sIFR vs FLIR: http://thinkclay.com/technology/cufon-sifr-flir
- Ultimate Image Replacement http://schoberg.net/2008/09/ultimate-image-replacement/
Método Google Web Fonts (free)
Google Web Fonts. (Imagen del blog: http://www.ellenswpnotizen.de)
- Usa cualquier tipografía en HTML: http://www.ticmedia.es/blog/usa-cualquier-fuente-html-google-fonts/
