テキストをCSSで画像に置きかえて表示させる方法。
ブラウザのパフォーマンス、SEO、方法が生理的に受けつけないなど、様々な要因が絡みあい、方法がいっぱい生み出されつらみがある。
なんかしっくりこないのでもうちょっと調べて考えて書く。
現時点で調べたもの
text-indent: -9999px; のように text-indent にネガティブの大きな値を指定してぶっ飛ばす。
ブラウザに優しくない。
圧倒的敗北感。
例えば上記のように -9999px を指定すると、9999 ピクセルのブロック領域を生成するため、パフォーマンスが低下してしまうらしい。
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
1の方法よりもパフォーマンスが良いらしいが、ソースは探していない。
IE6でも動くらしい。
font-size: 0;
文字列の気配が消えたっ…！？
<h1><img src="透明GIF画像へのパス" alt="テキスト"></h1>
で、透明GIF画像の背景に画像を指定する。
正直なんなんだこれという感じでわかっていない。
display: none;