9

多くのセクションを含む HTML ページがあり、各セクションにはセクション タイトルが画像として表示されます (適切なフォントを使用するため)。問題は、各画像/タイトルに「alt」および「title」テキストを指定しても、Ctrl+Fブラウザー機能がテキストを見つけられないことです。2つの可能な解決策を考えましたが、それらについてはあまり満足していません

  1. 埋め込みフォントを使用します。問題: クライアントが使用する必要のあるフォントが見つからず、著作権についても不明です。

  2. 画像の近くの DIV に画像内のテキストを配置しますが、ユーザー ビューからは非表示にします。問題: 検索エンジンはこのキーワード スタッフィングを考慮できますか? display:none の場合、ブラウザはテキストを検索しますか

誰かがより良い解決策を持っていますか? ありがとうリガ

4

5 に答える 5

5

Google Font Directoryを試してみませんか

Google Font Directory を使用すると、Google Font API で使用できるすべてのフォントを参照できます。ディレクトリ内のすべてのフォントは、オープン ソース ライセンスに基づいて Web サイトで使用でき、Google サーバーによって提供されます。

于 2010-06-11T13:23:04.217 に答える
2

これを達成するために、typeface.js Javascript ライブラリを使用しました。

このジェネレータを使用して、このライブラリのカスタム フォントを生成できます

これらのサイトには、例と使用方法もあります。

于 2010-06-11T13:21:02.110 に答える
2

一般に、画像を置き換える最良の方法は、スタイルシート内だけで行うことです。

HTML は次のようになります。

<h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

次に、CSS で次のことができます。

h2#fantastic-section-of-awesomeness {
    background: ...; /* The replacement image */
}
h2 span {
    text-indent: -100000px;
}

テキストは実際には非表示になっていないことに注意してください。一部のスクリーン リーダーはdisplay: none;(スタイルシートで指定されている場合でも) 正しく解釈しませmedia="screen"ん。代わりに、現実的には見えない画面の左側にずらします。

Ctrl+についてこれを特にテストしていませんFが、テキストがまだ技術的に表示されているという事実により、ブラウザーはそれを見つけることができるはずです。

ただし、画像を一致として強調表示することはできませんが、それでも混乱を招く可能性があります. を使用せずにそれを回避する実際の方法はありません@font-face。

于 2010-06-11T13:23:49.267 に答える
1

要素に z-index を使用することもできます。

<html>
    <body>
        ...
        <div>
            <div style="position:absolute; z-index: 1">My Section Header</div>
            <div style="position:absolute; z-index: 2"><img src="test.png"/></div>
        </div>
        ...
    </body>
</html>

画像はテキストの前にあるため、ユーザーは画像のみを表示しますが、「My Section Header」を検索するとセクションを見つけることができます。

于 2010-06-11T13:27:41.723 に答える
0

うーん... 生成された画像を使用する代わりにCufonをお勧めするつもりでしたが、完全ではありません。

見出しとしての画像よりもはるかに優れています。

于 2010-06-11T13:16:55.073 に答える