Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

29 2009 janeiro

Image replacement

Autor: Carlitos em CSS

Última modificação: 31 maio 2011

Quando o layout necessita utilizar alguma fonte customizada para títulos ou textos específicos, temos que utilizar imagens ao invés do texto puro.

A técnica image replacement serve justamente para exibir uma imagem (com a fonte customizada), ao mesmo tempo que no HTML há um texto limpo, para que este seja acessível aos sistemas de busca e leitores de tela, por exemplo.

Supondo que nosso HTML seja o seguinte:

<h1>Título do site</h1>

Faremos nosso CSS para que substitua este texto por uma imagem (de 200px por 50px por exemplo):

h1 { width: 200px; height: 50px; background: url(../imagens/titulo.png) no-repeat; text-indent: -999em; overflow: hidden; }

Obviamente que a largura, altura e caminho da imagem deverão ser ajustados, de acordo com a necessidade.