javascript - 常に同じ行の高さ？

Question

2本の線の間の高さが常に同じであるという解決策はありますか？つまり、フォントサイズが14pxとフォントサイズが19pxのテキストの距離は同じです。添付の写真で例を見ることができます。

Answer 1

うん、CSS line-height。MDNを参照してください。

例えば：

.big {
  font-size: 19px;
  line-height: 19px;
}

.small {
  font-size: 14px;
  line-height: 19px;
}

Answer 2

行の高さを一定に保つためのより良い解決策は、ボディタグを希望の高さでスタイル設定することです。**経験則として、フォント/行送りのサイズ設定にはptとemのみを使用する必要があることに注意してください（行送りは行の高さのタイポグラフィ用語です）

body{
      font-size: Xem;
      line-height: Yem;
}

次に、異なる先行値を必要とする特定のセクションがある場合、CSSのようなクラスでそれらのスタイルを設定できます。

.tightStory{
  font-size: Xem;
  line-height: Xem;
}
.looseStory{
  font-size: Xem;
  line-height: Zem;
}

お役に立てれば

Answer 3

line-heightたとえば、ピクセル単位でも特定の値に設定できますが* { line-height: 21px }、これは非常に厳密であり、遅かれ早かれ問題を引き起こす傾向があります。たとえば、フォントサイズが14pxと19pxのテキストの場合、実際には異なる行の高さを使用する必要があります。同じ行の高さを使用する理由を説明すると、元の問題に対する適切な解決策がある可能性があります。

行の高さを設定しても、画像のように一定の間隔が設定されません。これは、テキストのベースラインと次の行の大文字の一番上の行の間の距離を示します。行の高さは、テキストのベースライン間の距離です。行間の視覚的な空きスペースは、フォントや文字によって異なります（a、x、sなどの文字のみを含む行と、Ê、Å、g、Qなどの文字を多数含む行について考えてみてください）。大文字のトップライン、つまり発音区別符号なしの大文字の最大レベルは、フォントによって大きく異なります。