web-dev-qa-db-ja.com

CSSを使用してテキストベースラインの下のスペースを削除します

最近、私は日本語のテキストを扱っていますが、かなり厄介なプロパティを見つけました。日本語では、英語とは異なり、グリフはテキストのベースラインより下には伸びません。この例は、私が何を意味するかを示しているはずです。

div {
  font-size: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
}
<div lang="ja">日本語</div>
<div lang="en">English</div>

「英語」の「g」が下線の下にどのように伸びているかに注意してください。これは典型的な日本語のテキストです。それにもかかわらず、スペースはまだ下線の下に予約されており、実際、私の画面では、日本語のテキストは英語のテキストよりもmoreスペースを予約しています。私の質問はこれです：

フォントやフォントサイズの変更全体で信頼できるCSSでこのスペースを削除する方法はありますか？私は少なくとも2つの可能なアプローチを見ることができます：

  • ベースラインの下のスペースを直接削除します。
  • ベースラインを移動して、収容ボックスの下部に配置します。
htmlcssfontscjk
9
Will Kunkel

line-heightをリセットして、1より大きくならないようにする必要があります。初期値はnormalで、ブラウザのユーザーエージェント、フォントファミリ、およびフォントサイズによって異なりますが、一般に、1から1.2の間の数値です。 こちら 興味のある方は詳細をご覧ください。

div {
  font-size: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
  line-height: 1;
}
<div lang="ja">日本語</div>
<div lang="en">English</div>
8
Juan Ferreras

行の高さをフォントサイズと同じサイズに設定するだけです：line-height: 72pt。これにより、フォントの高さに使用されるスペースが正規化されます。もちろん、行の高さのすべての値を使用して、そのスペースを調整できます。詳細情報 line-height at MDN 。

div {
  font-size: 72pt;
  line-height: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
}
<div lang="ja">日本語</div>
<div lang="en">English</div>
1
andreas