使用CSS去除文本基线下方的空间

Question

最近我一直在处理日语文本，发现一个相当令人厌烦的问题。与英语不同，日语字形不会延伸到文本基线以下。下面这个示例应该能清楚地说明：

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>

请注意，“English”中的“g”字母在下划线下方延伸，但日本语中的字符则没有。这是日本文本的典型特征。尽管如此，在下划线下方仍然保留了空间，实际上在我的屏幕上，日语文本比英语文本保留了更多的空间。我的问题是：

有没有一种CSS方法可以跨不同字体和字号可靠地去除此空间？我可以看到至少有两种可能的方法：

• 直接删除基线下方的空格。
• 将基线移动到包含框的底部。

- Rose Kunkel

Answer 1

需要重置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>

- Juan Ferreras

---

有趣的是，我没有意识到行高的默认值比字体大小大。 - Rose Kunkel

@RoseKunkel 我认为字体的大小是"合适"的，但通常用于下行符（我不确定是否正确使用了该术语），而这个字体（以及其他字体）没有使用。 - Nic

Answer 2

将行高设置为与字体大小相同的大小：line-height: 72pt。这样可以使字体高度所占用的空间规范化。当然，您可以采用任何您喜欢的行高值来调整该空间。更多信息请参见MDN上的line-height。

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>

- andreas