Oficio Gráfico

Muchos problemas y algunas soluciones del proletariado creativo

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

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)

Método CUFON

Trabaja con Javascript.

Método sIFR

Funciona con Flash.

Algunos artículos de opinión y comparativa sobre las diferentes técnicas CSS:

Método Google Web Fonts (free)

Google Web Fonts. (Imagen del blog: http://www.ellenswpnotizen.de)

Google Web Fonts. (Imagen del blog: http://www.ellenswpnotizen.de)

Método Type Kit (freemium)

Iremos ampliando.
Saludos y paz de Dios.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Información

Esta entrada fue publicada en 28/09/2011 por en Diseño Web, Programador y etiquetada con .

Secciones

Suscríbete a Oficio Gráfico por RSS

Actualizaciones de Twitter

%d personas les gusta esto: