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，取决于浏览器的用户代理，字体系列和字体大小，但它通常在1到1.2之间。 Here's如果您有兴趣了解更多信息。

＆＃13;

div {
  font-size: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
  line-height: 1;
}

＆＃13;

<div lang="ja">日本語</div>
<div lang="en">English</div>

＆＃13;

Answer 2

只需将线条高度设置为与字体大小相同的大小：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>

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

2 个答案: