特定的文本字符可以改变行高吗？

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类似于添加unicode字符后文本更改高度，只是这里没有技巧。“_”只是一个简单的 ASCII 字符。

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

我想有些字符是特殊的，例如在其线下方绘制的“p”、“g”、“j”（可能还有“_”）。仍然哪种行为是正确的。是否认为溢出？

PS：此外，我觉得很有趣要么 overflow-x: hidden;overflow-y: visible;和overflow-x: visible;overflow-y: hidden;还是引起了这一点。这对我来说更像是一个实际的错误。

Answer 1

我的问题是哪种行为是正确的。

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

是否允许特定字符更改行高（我认为它只应该与字体相关）？

性格不变line-height。更准确地说，line-height是一个只能通过设置更改的属性，line-height但您可能会与由 定义的行框混淆，而line-height单独一个字符无法更改它。

不应该 line-height: 1 意味着它可以完全适合任何文本吗？

不一定，line-height:1意味着行框将等于1xfont-size ¹但字体是否设计为包含此空间内的所有字符？可能他们中的大多数会这样做，但我们不知道。

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

下面是一个基本的例子来说明：

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 控制的行框.

因此，如果 theline-height等于 1 我们将有一个 line box 等于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>

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

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>

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

相关问题：

了解有关内联级框高度的 CSS2.1 规范

为什么行框之间有空间，而不是由于半领先？

行内块元素的行高问题

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

引自这篇文章：

很明显，设置line-height: 1是一种不好的做法。我提醒你，无单位值是相对于字体大小的，而不是相对于内容区域的，并且处理比内容区域小的虚拟区域是我们许多问题的根源。

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