5

CSSline-heightプロパティが に設定されている場合、HTML ページのレンダリング動作に一貫性がありませんnormal。また、Eric Meyer によるさまざまな矛盾点が議論されているブログ投稿も見つけました。line-height: normal;

要点は次のとおりです。宣言の効果はline-height: normal、私が予想していたブラウザごとに異なるだけでなく、実際、これらの違いを定量化することがすべてのポイントでした<em>。与えられた顔の中で。

私の場合、エンベロープ記号「✉」などのいくつかの Unicode 記号を追加すると、line-heightが に設定されている場合、行ブロックの高さが変わることがわかりましたnormal。設定line-height: 1.2;すると問題が解決します。

私の質問は: を使用する理由はありますline-height: normal;か? それはとても予測不可能な振る舞いをします。

4

3 に答える 3

6

原則として、(デフォルト設定または明示的な設定による) の値は「通常」です。ブラウザは、使用されているフォントに適した値を使用することが期待されますnormal。line-heightこのバリエーションは驚くべきことではありません。これは定義で暗示されています。

これは、次のような問題の解決に役立つはずです: を宣言しfont-family: a, b, c, d, sans-serifますが、特定のフォント (存在する場合) が各コンピューターで使用できるか、または既定のサンセリフ フォントが何であるかがわからない場合。これらのフォントでは、見栄えを良くするために、異なる行の高さが必要になる場合があります。ブラウザは使用しているフォントを認識しているため、内部テーブルから行の高さを取得できます。

実用的な面では、ブラウザーは値を適切に選択しない場合があります。一般的に少し小さすぎる傾向があります。タイポグラフィの面では、行の高さは、フォント フェイスだけでなく、テキストの種類 (たとえば、分音記号の多いテキストでは行の高さを大きくする必要があるなど) や、特に尺度 (列の幅、行の長さ): 長い行には、行の高さを大きくする必要があります。

したがって、一般的には、さまざまな側面を考慮して、デザイナーが行の高さを設定するのが最善です。

これにより、説明した問題も回避されます。行に異なるフォントのグリフが含まれている場合、各フォントに関連付けられたデフォルトの行の高さが異なる場合があります。たとえば、エンベロープ記号はいくつかのフォントにのみ含まれているため、宣言したフォントとは異なるフォントからブラウザが強制的に選択される可能性があります。

これが、フォントを混在させると行間が不均一になる原因です。重要なのはグリフの高さではなく、フォントの行の高さです。たとえば、単なるピリオド「.」を追加します。line-heightCambria Math フォントを使用すると、特定の値に設定しない限り、行間が大きくなります。

于 2013-01-11T13:56:58.040 に答える
1

line-height: normal; を使用する理由はまったくありますか?

はい - 親要素のどこかに設定した場合に、行の高さをブラウザのデフォルトにリセットする必要がある場合に使用できるように、プロパティがあります。

なぜ、いつそれを行う必要があるかは、実装する内容と、クロスブラウザーのピクセル パーフェクト デザインを気にするかどうかによって異なります。

于 2013-01-11T12:18:33.643 に答える
0

"normal" は "line-height" のデフォルト値です。line-height: normal をオーバーライドすることを明示的に宣言します。

例：

h1 {
    line-height: 150%;
}

h1.normal {
    line-height: normal;
}

上記のスニペットを見ると、h1 タグの行の高さを 150% と宣言しています。特定の h1 タグを [ブラウザ固有の行の高さ] で正常に動作させたい場合は、「通常」を使用して上書きします。

通常の行の高さはブラウザによって異なります

于 2013-01-11T12:18:04.897 に答える