使用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>

请注意"英语"中的"g"如何延伸到下划线之下,但日本语中的所有字符都没有.这是典型的日文文本.尽管如此,空格仍保留在下划线下方,实际上在我的屏幕上,日文文本比英文文本保留更多空间.我的问题是:

有没有办法用CSS删除这个空间,这对于更改字体和字体大小是否可靠？我可以看到至少两种可能的方法:

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

Answer 1

你需要重置它line-height所以它不大于1.初始值normal取决于浏览器的用户代理,font-family和font-size,但它通常是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>