最近我一直在处理日语文本,发现一个相当令人厌烦的问题。与英语不同,日语字形不会延伸到文本基线以下。下面这个示例应该能清楚地说明:
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方法可以跨不同字体和字号可靠地去除此空间?我可以看到至少有两种可能的方法:
- 直接删除基线下方的空格。
- 将基线移动到包含框的底部。