単一の文字は異なるブラウザの行の高さに影響しますか?

特定の文字によって行の高さは影響を受ける可能性があります

この記事では、特定のテキスト文字がレンダリング時の行の高さを変更できるかどうか、つまり動作を調査しますWindows 10 版 Firefox で確認されました。

提供されたコード スニペットには、ASCII を含む 2 つの段落が表示されています。アンダースコア文字が 1 つのインスタンスで追加されました。 Firefox では、アンダースコアにより行の高さが減り、文字が切り取られますが、他のブラウザではこのような動作は見られません。

どちらの動作が正しいのかという疑問が生じます。 line-height: 1 は通常、任意のテキストをそのサイズの行に収めることができることを意味します。ただし、キャラクター デザインには特定の課題が生じる可能性があります。

正しい動作

ブラウザやオペレーティング システムによってデフォルトのフォントが異なるため、観察された動作はすべて正しいとみなされます。

行の高さと文字デザイン

行の高さライン ボックスのサイズに影響しますが、文字のレンダリングを直接制御するものではありません。文字はフォントのコンテンツ領域によって定義され、行の高さの影響を受けません。

行の高さ: 1 は、フォントがその高さを設計していない可能性があるため、すべての文字が指定された高さ内に収まることを保証しません。

例

次のコード スニペットは、行ボックスの区別を示しています。そしてコンテンツエリア。行の高さが変化すると、span 要素 (行ボックスを表す) の赤い背景のサイズが変化しますが、テキスト (コンテンツ領域を表す) は変化しません。

以上が単一の文字は異なるブラウザの行の高さに影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。