クリーンなhtml5Webサイトをコーディングしようとしています。私はウェブサイトのベースとしてhtml5ボイラープレートを使用しています。それはmodernizrが付属しています。ページタイトルには、text-shadowとfont-faceを使用しており、modernizrを介して小さなcssフォールバックを設定しています（機能の1つが利用できない場合、png画像が背景として表示されます）。
つまり、コードは
<h1 id="header-title">Title here</h1>
ただし、ご想像のとおり、フォールバックpng画像を背景として設定すると、「ここにタイトル」というテキストが表示されたままになります。そのテキストを取り出す方法を知っていますか？できるだけきれいにしたいと思います。そのため、innerHTMLを消去するためにテキストインデントやJavaScriptを使用しませんでした。
modernizrでは、おそらく次のようなCSSルールが必要です。
body.no-fontface #header-title {
text-indent: -9999px;
}
編集
このページを見て、選択できると思います：http: //css-tricks.com/css-image-replacement/
あなたの最善の選択肢は、Gilder / Levin画像置換技術を使用することだと思います。テキストは残りますが、グラフィックで覆われます。
グーグルは、それが本質的に欺瞞的でない限り、このリンクで議論されているようにそれで大丈夫のようです。（そしてあなたのグラフィックがあなたが欺いていないテキストと同じことを言っている限り）
http://mezzoblue.com/archives/2008/05/05/image_replac/
Mezzoblueサイトには、人気のあるすべての画像置換技術の概要も掲載されています。
これがGilder/Levinテクニック（Mezzoblueサイトから直接コピー）です。置換画像が存在する場所に空のスパンタグを追加し、絶対位置で元のテキストの上にスタックします。さて、余分なスパンタグはあなたの「クリーンな」要件を満たさないかもしれませんが、私の意見では、実際のテキストを非表示または削除する他のテクニックはもっと悪いです。
おそらく、最もクリーンな解決策は、フォント面を使用できない訪問者のエクスペリエンスがわずかに低下することですか？適切に設定すると、at-font-faceを使用して訪問者の99％（ish）に到達できるはずです。
<h3 id="header">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
Gilder / Levinの1つの欠点は、置換画像が不透明でなければならないことです。透明な場合、グラフィックがどのように見えるかによっては、元のテキストが透けて見える場合があります。
Leahy / Langridgeメソッドは透明な画像で機能します（Appleはナビゲーションメニューにこの手法を使用しています）-私が知っている唯一の欠点は、誰かが画像をオフにしてcssをオンにして閲覧している場合、コンテンツが表示されない可能性があることです。
繰り返しますが、Mezzoblueサイトから
<h3 id="header">
Revised Image Replacement
</h3>
/* css */
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(sample-opaque.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}
「css-on、images-off」シナリオに失敗した場合の別のオプションは受け入れられません-単一ピクセルの画像置換。この手法は
mezzoblue.com/tests/revised-image-replacement/
にあり、別の応答
css-tricks.com/css-image-replacement/に記載されて
います（不完全なリンクについては申し訳ありませんが、現在1つのリンクしか許可されていません）投稿ごとに、前の各URLの前にwwwを追加して、さまざまな画像置換手法を表示します）
テキストをに入れて、spanに設定spanしvisibility: hiddenます。