web-dev-qa-db-ja.com

線の高さのEM

新しいWebサイトをピクセルからemに変換したいと思います。私の質問は、テキストの行の高さプロパティにもemsを適用する必要がありますか?

27
Caspert

「emsへの変換」とは、font-sizeem単位を使用することを意味すると仮定すると、フォントサイズにも適応するようにline-heightを設定する必要があります。 2つのプロパティは密接に関連しており、一方をemに設定し、もう一方(たとえば)をpxまたはptに設定すると、フォントがサイズが変更されます。したがって、「emを使用する」という考え方に反して、本質的に接続されたプロパティに本質的に異なるユニットを使用します。

たとえば、font-size: 1.5emline-height: 18pxを設定すると、要素の親のフォントサイズに依存し、そのサイズが予想よりもはるかに小さい場合や非常に大きい場合、非常に間違った結果になる可能性があります。

em単位を使用するか、純粋な数値を使用するかは別の問題です。 line-height: 1.2のように数字だけを使用することは、主にline-height: 1.2emのようにemユニットを使用することと同等です。ただし、line-heightが継承される場合、計算される値ではなく、継承されるのは純粋な数値であるという違いがあります。

たとえば、内部要素の親のフォントサイズが2倍の場合、継承値1.2は、独自のフォントサイズの1.2倍が使用されることを意味します。しかし、親にline-height: 1.2emがある場合、子は親のフォントサイズの1.2倍の値を継承します。これは、自身のフォントサイズよりもはるかに小さい値です。

詳細な説明については、例を参照してください line-height @ Mozilla Developer Network

58

line-heightpxemに設定でき、すべてのユニットが適合します。

line-heightは、単位/単位ではなく、フォントサイズを乗算する数値のみを意味する係数/乗数を使用する場合に、将来にわたって最もよく機能します。

.foo {
  font-size: 1.3em; /* based that 1em == 10px */
  line-height: 1.3; /* 16.9px line-height */
}

だから、はい、あなたはあなたの質問に答えることができます:いいえ、あなたはすべきではありません。

ファクターベースの行の高さを将来の証拠とするだけです。

8
Mark

(継承の問題を防ぐために)行の高さに単位なしの番号を使用することをお勧めします。計算された行の高さは、単位なしの値に要素のフォントサイズを掛けた積になります。

font CSSショートカットを使用する方が便利な場合があります(Mozilla CSSドキュメントからの例):

div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

単位のない値が望ましい理由の良い例は、ここにあります: 行の高さの値には単位のない数値を好む

5