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

我有以下代码：

<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字符.

我的问题是哪种行为是正确的.
是否允许特定字符更改行高(我认为应该仅取决于字体)？行高不应该：1表示它可以完全适合任何文本吗？

我想一些特殊的字符,例如绘制在其行下方的“ p”,“ g”,“ j”(可能还有“ _”).仍然哪种行为是正确的.是否被认为是溢出？

PS：此外,我觉得它很有趣,要么是overflow-x：隐藏； overflow-y：可见；和overflow-x：可见； overflow-y：隐藏；仍然会导致这种情况.对我来说,这似乎更像是一个实际的错误.

最佳答案

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 1,但是字体设计为包括该空间内的所有字符吗？他们中的大多数人可能会做,但我们不知道.

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

这是一个基本示例说明：

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(而不是font-size的20px),边框定义了我们控制的线框使用行高.

因此,如果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>

其他字体大小将删除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>

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

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

猜你在找的HTML相关文章