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

如果我使用Firefox中的浏览器工具检查下面的代码段，则在带下划线和不带下划线的行之间没有高度差。唯一的差异是由line-height设置引起的：line-height: 1为16像素，浏览器的默认行高为19.2像素。因此，下划线在这里没有区别（在Mac上为Firefox 66.0.3），在两种情况下均可见。

请注意，我将页边距设置为0，以查看“纯”行高，且行与行之间没有距离。另外，我没有指定字体熟悉设置，因此使用了p标签的浏览器默认字体。

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

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

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>

Answer 2

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

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

是否允许特定字符更改行高（我认为这仅应取决于字体）？

字符不变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，就像{{1 }}）和边框定义了我们使用line-height控制的线框。

因此，如果font-size等于1，我们将有一个等于line-height的线框，不足以包含内容区域的20px，因此它将被截断并我们可能会隐藏一些符合逻辑的字符（或其中的一部分）：

23px

span {
  background: red;
  color: #fff;
  font-size: 20px;
  font-family: monospace;
}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

其他 blah_blah ÂÄ j p 将删除Firefox中的下划线：

font-size

span {
  background: red;
  color: #fff;
  font-size: 26px;
  font-family: monospace;
}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

另一个带有Google字体的示例，其结果应该是相同的跨浏览器。下划线可见，但 blah_blah ÂÄ j p  / ^

不可见

¨

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;
}

您可以清楚地看到，每当我们使用其他字体来确认与字体相关时，我们就会有不同的溢出。除非我们知道字体的设计方式，否则我们将无法控制它。

相关问题：

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

本文引述：

很明显，设置<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> blah_blah ÂÄ j p 是不好的习惯。我提醒您，无单位值是相对于字体大小的，而不是相对于内容区域的，并且处理比内容区域小的虚拟区域是我们许多问题的根源。

^{1：我考虑了简化的解释，但实际上，线盒的计算不仅与line-height属性有关。检查以下链接以获得更准确和完整的解释}

Answer 3

在大多数浏览器中，除非另有说明，否则default line-height（取决于字体系列）大约为1.2。这包括Firefox。

这可以解释为什么当行高设置为1时，在FireFox中不显示下划线的原因-截断了该行的底部。因此，我认为这与字体无关（尽管这确实有帮助），但浏览器的默认设置也不例外。

某些字体大小甚至在看似“相同”的字体大小下也要比其他字体大（如我确定您在格鲁吉亚vs时代新的Roman / Baskerville中键入文档时所见过的；因此无法保证该文本将始终显示在指定的行高1（或1.2）上。但是，有多种方法可以测量以像素为单位的字体

希望这会有所帮助

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

3 个答案: