html - 特定文本字符可以更改行高吗？

Question

我有这个代码:

<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>

<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>

结果是(注意没有下划线，并剪切字符):

---

---

也就是说，它在 Firefox(Windows 10 上的 66.0.3)中以这种方式运行。其他浏览器似乎呈现下划线。上面的代码片段运行程序似乎也可以工作(即使在 Firefox 中)，除非您在“整页”中运行它。

这个Q类似于Text changes height after adding unicode character除了这里没有技巧。 “_”只是一个简单的 ASCII 字符。

我的问题是哪种行为是正确的。是否允许特定字符更改行高(我认为它只应该与字体相关)？ line-height: 1 不应该暗示它可以完全适合任何文本吗？

我想有些字符是特殊的，例如“p”、“g”、“j”(可能还有“_”)，它们绘制在它的线下方。仍然是哪种行为是正确的。算不算溢出？

PS:此外，我觉得要么 overflow-x: hidden;overflow-y: visible; 和overflow-x: visible;overflow-y 很有趣: hidden; 仍然会导致这个。这对我来说更像是一个真正的错误。

Answer 1

My question is which behavior is the correct one.

所有这些都是正确的，因为我们在所有浏览器中都没有相同的默认字体，而且它也因操作系统而异。

Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?

字符不会改变行高。更准确地说，line-height 是一个只能通过设置 line-height 来更改的属性，但您可能会混淆由 line-height 单独一个字符不能改变它。

Shouldn't line-height: 1 imply it can fit exactly any text?

不一定，line-height:1 表示行框将等于1xfont-size ¹ 但是字体旨在包括这个空间内的所有 Angular 色？他们中的大多数人可能会这样做，但我们不知道。

---

基本上，您需要考虑两件事。由字体属性定义的内容区域和由行高定义的行框。我们无法控制第一个，我们只能控制第二个。

这里有一个基本的例子来说明:

span {
 background:red;
 color:#fff;
 font-size:20px;
 font-family:monospace;
}

body {
 margin:10px 0;
 border-top:1px solid;
 border-bottom:1px solid;
 animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    line-height:0.2
  }
  
  to {
    line-height:2
  }
}

<span >
blah_blah
</span>

红色是我们的内容区域，它的高度由字体属性定义，如果您检查该元素，您会看到它的高度等于 23px(不是 20px 像 font-size) 和边框定义了我们使用行高控制的行框。

因此，如果 line-height 等于 1，我们将有一个等于 20px 的行框，这不足以包含 23px 内容区域因此它会被截断，我们可能会隐藏一些合乎逻辑的字符(或其中的一部分):

span {
  background: red;
  color: #fff;
  font-size: 20px;
  font-family: monospace;
}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<span>
blah_blah ÂÄ j p
</span>

不同的 font-size 将删除 Firefox 中的下划线:

span {
  background: red;
  color: #fff;
  font-size: 26px;
  font-family: monospace;
}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<span>
blah_blah ÂÄ j p
</span>

另一个使用谷歌字体的例子，结果应该是相同的跨浏览器。下划线可见，但 ^/¨

不可见

span {
  background: red;
  color: #fff;
  font-size: 26px;
  font-family: 'Gugi', cursive;

}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>

另一个下划线不可见的例子:

span {
  background: red;
  color: #fff;
  font-size: 27px;
  font-family: 'PT Sans', sans-serif;

}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>

你可以清楚地看到，每次我们使用不同的字体时，我们都会有不同的溢出，这证实了这是字体相关的。除非我们知道字体是如何设计的，否则我们无法控制它。

---

相关问题:

Understanding CSS2.1 specification regarding height on inline-level boxes

Why is there space between line boxes, not due to half leading?

Line height issue with inline-block elements

---

这是一篇获得更准确细节和计算的好文章:https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

引用这篇文章:

It becomes obvious that setting line-height: 1 is a bad practice. I remind you that unitless values are font-size relative, not content-area relative, and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.

^{1 : 我考虑了一个简化的解释，但实际上行框的计算不仅与行高属性有关。}