文字プロパティは CSS レンダリングの行の高さにどのような影響を与えますか?

文字のプロパティは行の高さに影響しますか?

次のような行の高さと文字のプロパティを含むコードでは、

<p></p>

さまざまな動作が発生します。ブラウザ間で。 Firefox ではテキストの表示が異なる場合があり、意図した結果について疑問が生じることがあります。

正しい動作の決定

このシナリオの正しい動作は、いくつかの要因に依存するため、明確に定義されていません。

• ブラウザ レンダリング エンジン: 各ブラウザには独自のレンダリングがあります
• オペレーティング システム: オペレーティング システムは、特にフォントのレンダリングに関して、レンダリング動作にも影響を与える可能性があります。

文字の影響行の高さ

アンダースコア ("_") などの特定の文字は、行の高さを厳密に変更できない場合があります。ただし、行ボックスと行の高さのプロパティを決定することはできます。ほとんどの文字セットは行の高さに大きな影響を与えませんが、ベースラインの下に広がるディセンダを持つ文字などの例外もあります。

行ボックスとコンテンツ領域

を区別することが重要です。 line-height プロパティによって定義される 行ボックス と、フォント特性によって定義される コンテンツ領域。 line-height プロパティは、すべての文字を含む行ボックスの高さを制御し、フォント プロパティはそのボックス内の個々の文字の高さを決定します。

サンプル図

次のコードスニペットはこの原則を示しています:

span {
  background:red;
  color:#fff;
  font-size:20px;
  font-family:monospace;
}

body {
  margin:10px 0;
  border-top:1px solid;
  border-bottom:1px solid;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    line-height:0.2
  }

  to {
    line-height:2
  }
}

<span>
  blah_blah
</span>

行の高さが動的に変化しても、行ボックスが拡大してもコンテンツ領域は一定のままです。そして倒れる。これは、文字のプロパティと行の高さが独立していることを示しています。

以上が文字プロパティは CSS レンダリングの行の高さにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。