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

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）中的行为方式。其他浏览器似乎呈现下划线。上面的 sn-p 运行器似乎也可以工作（即使在 Firefox 中），除非你在“整页”中运行它。

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

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

我想有些字符是特殊的，比如画在它的线下面的“p”、“g”、“j”（可能还有“_”）。仍然哪种行为是正确的。算不算溢出？

PS：此外，我觉得这很有趣 either 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 ¹ 但字体是否设计为包含此空间内的所有字符？可能他们中的大多数人都会这样做，但我们不知道。

---

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

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

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 控制的线框。

所以如果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

引用这篇文章：

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

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

Answer 2

如果没有另外指定，default line-height（取决于字体系列）在大多数浏览器中约为 1.2。这包括火狐。

这可以解释为什么当行高设置为 1 时下划线在 FireFox 中不显示 - 行的底部被切断。所以我不认为这完全与字体有关（尽管这确实有贡献），但也与浏览器默认值有关。

即使在看似“相同”的字体大小下，某些字体大小也比其他字体大（我相信您在输入文档时已经看到了，例如 Georgia vs Times new Roman/Baskerville ；所以您无法得到保证该文本将始终显示在指定的行高 1（或 1.2）上。但是有一些方法可以以像素为单位测量字体

希望对你有帮助

Answer 3

如果我使用 Firefox 中的浏览器工具来检查下面的 sn-p，带和不带下划线的行之间没有高度差异。唯一的区别是由line-height 设置引起的：16px 与line-height: 1，19.2 px 与浏览器的默认行高。所以下划线在这里没有什么区别（Mac 上的 Firefox 66.0.3），并且在这两种情况下都是可见的。

请注意，我将边距设置为 0 以查看“纯”行高，而 行之间没有距离。另外，我没有指定字体家族设置，所以使用p标签的浏览器默认字体。

我能想到的你所描述的唯一原因是一种具有非常特殊的尺寸/设置的字体，其中下降部分（即像 pqj 这样延伸到基线以下的字母部分）不是 在字体定义的行高内。

经过一堆 cmets 来回：我想这可能是由 Windows 和 Mac 上不同的默认（系统）字体引起的。仍然是一个错误，我会说（如果您使用的是默认字体）。

html,
body {
  margin: 0;
  padding: 0;
}

p {
  background: #fb6;
  margin: 0px;
}

<p style="line-height: 1;overflow: hidden;">blah_plah</p>
<p style="line-height: 1;overflow: hidden;">blah plah</p>
<p>blah_plah</p>
<p>blah plah</p>