使用 CSS 删除文本基线下方的 space

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" 是如何延伸到下划线下方的，但是日本语中的字符 none 是如何延伸到下划线下方的。这是日本文本的典型特征。尽管如此，space 仍然保留在下划线下方，事实上在我的屏幕上，日语文本比英文文本保留更多 space。我的问题是：

有没有办法用 CSS 删除此 space，这在更改字体和字体大小时是可靠的？我至少可以看到两种可能的方法：

直接去掉基线下面的space。
将基线移动到包含框的底部。

Answer 1

您需要重新设置 line-height 使其不大于 1。初始值为 normal 这取决于浏览器的用户代理、字体系列和字体-size，但通常是 1 到 1.2 之间的某个数字。 Here's 更多信息，如果您有兴趣。

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>

Answer 2

只需将行高设置为与字体大小相同：line-height: 72pt。这规范化了用于字体高度的 space 。当然，您可以采用您喜欢的行高的每个值来调整 space。更多信息发送至 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>

使用 CSS 删除文本基线下方的 space

Remove space below the text baseline with CSS

html

css

fonts

cjk