8

ベースラインではなく、ラインの下降高さでテキストを表示する適切な方法はありますか?

次のページを参照してください。

http://en.wikipedia.org/wiki/Baseline_(typography

http://jsfiddle.net/YPPnU/

目標は、画像を使用せずに、テキストの下部(フィドルに示されている)をH1ブロックの下部と同じ高さにすることです。

降順の文字(p、qなど)を使用するとフラッシュすることに気付きますが、このプロジェクトの範囲でそれらを使用することは決してありません。ディセンダーのない文字をh1ブロックの下部と同じ高さにする必要があります。

ポジショニングとネガティブマージンでさまざまな調整を試みましたが、これには2つの問題があります。1)h1の高さが台無しになります。2)ネガティブボトムの量は、使用するフォント面によって異なる場合があります。これを行うための「適切な」方法はありますか?

編集 追加の更新についてはコメントを参照してください...。

最高の作業テクニックはここにあります:http: //jsfiddle.net/YPPnU/23/

しかし、私は線の高さを「推測」したくない

さらに、別のオプションとして、すべての文字の下部がベースラインではなく降下に配置されているWebフォントを使用することも考えられましたが、Googleで1つを見つけることができないようです。そのようなものが存在するかどうか誰かが知っていますか?

4

1 に答える 1

7

どうvertical-align: bottomですかline-height: 65%

http://jsfiddle.net/y53uK/

于 2011-05-30T18:16:52.357 に答える