Juglar

Cuando queremos decorar un texto (por ejemplo, el título de nuestra web), y no es suficiente con darle formato, podemos sustituir el texto por una imagen que lo represente. Así, podemos mostrar cualquier tipo de fuente, sin preocuparnos de cómo la interpretan los distintos navegadores, además de un sinfín de posibilidades estéticas que ofrecen los editores de imágenes.

La técnica consiste en escribir un texto en HTML, esconderlo usando CSS, y reemplazarlo por una imagen de fondo que muestre dicho texto. El reto está en no perder accesibilidad ni posicionamiento.

Solución 1:

<h1><img src="imagen-titulo.gif" alt="Titulo" /></h1>

Desventaja: Los buscadores no dan tanta importancia al texto “alt” como al texto real.

Solución 2:

<h1>Titulo</h1>

h1 {
background: url(imagen-titulo.gif) no-repeat;
height: ?px; /* altura de la imagen */
text-indent: -9999px;
}

Desventaja: los usuarios que vean la web sin imágenes, tampoco verán el texto.

Solución 3: Fahrner Image Replacement (FIR)

<h1><span>Titulo</span></h1>

h1 {
background: url(imagen-titulo.gif) no-repeat;
height: ?px;
}

h1 span {
display:none
}

Desventaja: si el usuario no puede ver imágenes, tampoco verá un texto alternativo.

Solución 4:

<h1 title="Titulo">Titulo<span></span></h1>

h1 {
height: ?px;
position:relative;
overflow:hidden;
}

h1 span {
position:absolute; left:0; top:0; z-index:1;
height:?px;
background: url(imagen-titulo.gif) no-repeat;
}

Solución 5: Sin span.

<h1>Titulo</h1>

h1 {
padding-top: ?px;
background: url(imagen-titulo.gif) no-repeat;
overflow: hidden;
height: ?px;
voice-family: "\"}\"";
voice-family:inherit;
height: 0;
}

WebCredible: Ten CSS tricks you may not know
[ws] Replacing Text By An Image
Stopdesign | Using Background-Image to Replace Text
mezzoblue: revised image replacement
Image Replacement—No Span

Ver también:
Diseñorama :Tutoriales:Manual sIFR, paso a paso
Geekipollas » Sustituyendo texto por imágenes con CSS
Thierry Image Placement
Access Matters: Quiz 1.1.4: Image Replacement Techniques
A List Apart: Articles: Facts and Opinion About Fahrner Image Replacement
mezzoblue: Image Replacement. Again.
Khmerang.com - CSS-Technique: Worn Type
Diseñorama : Reemplazo de textos - una comparación
iIR: img Image Replacement
wg:Single Image Multi Replacement
Multi color sIFR 2.0.1
Reemplazo accesible de textos por imágenes - Armonía | En definitiva…
Diseñorama: Reemplazo de textos – una comparación
CSSLab » Image Replacement o cómo reemplazar contenido por imagen