0

Web サイトにブートストラップを追加していますが、狭い解像度 (ウィンドウ サイズ) を使用すると、ヘッダーが重なることに気付きました。通常の H1 サイズのようにヘッダーのサイズが小さい場合は問題ありません。しかし、大きなサイズ (以下の CSS を確認してください) を使用すると、画像に例示されている問題が発生します。

どうすれば解決できますか？垂直方向の間隔などのプロパティはありますか? 私はcssの初心者です。考えられる回避策は、 Fittextを使用することです。

CSS コード:

.nevis-font {font-family: 'Nevis', Tahoma, sans-serif;}
.ultra-head {font-size: 7.8em;}

HTML コード:

<div class="row-fluid">
    <div class="span12">
        <br/>
        <h1 class="text-center nevis-font ultra-head">DIOGO NUNES</h1>
        <br/><br/><br/>
    </div>
</div>

例

4

1 に答える 1

1

変更する必要がありますline-height:

.nevis-font {
    font-family: 'Nevis', Tahoma, sans-serif;
}
.ultra-head {
    font-size: 7.8em;
    line-height: 1.5;
}
  • ピクセル単位の line-height を使用しないでください。スケーリングされません。単位のない値 (またはパーセンテージまたは ems ですが、同等のもの) を使用してください。
  • 1以下も設定しないでくださいline-height。
  • デフォルト値は約 1.3 または 1.4 です
  • アクセシビリティ ガイドラインでは、少なくとも 1.5​​ を推奨しています
  • line-height 1 を使用したい場合には理由がありますが、それはコンテンツが 2 行にならないことが確実な場合です。まれなケース

フォント メーカーは、フォント ファイルに埋め込まれたベースラインやその他のプロパティを自由に使用できます。必要に応じて、スクリプト フォントは 3 行以上のテキストにまたがって派手な効果を得ることができます。（私は信じている）。
tl;dr まったく同じタイポグラフィ パラメータを使用すると、各フォントと文字は異なる高さと幅などを占有します。

編集: Firebug で見られる負のマージンはどこにありますか?

于 2013-05-11T09:08:01.893 に答える