特定的文字字符可以改变行高吗? [英] Can specific text character change the line height?
问题描述
我有此代码:
<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>
会导致(注意没有下划线和剪切字符):
which results in (notice no underscore, and cut characters):
也就是说，它在Firefox(Windows 10上为66.0.3)中具有这种行为.其他浏览器似乎提供了下划线.除非您在整页"中运行，否则上述代码片段运行器似乎也可以工作(即使在Firefox中也是如此).
That is, it behaves that way in Firefox (66.0.3 on Windows 10). Other browsers seem to render the underscore. The above snippet runner also seems to work (even in Firefox), unless you run it in "Full page".
此Q类似于文本在添加Unicode字符后会更改高度除了这里没有技巧. "_"只是一个简单的ASCII字符.
This Q is similar to Text changes height after adding unicode character except there are no tricks here. "_" is just a simple ASCII character.
我的问题是哪种行为是正确的.
是否允许特定字符更改行高(我认为这仅应取决于字体)? line-height: 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)? Shouldn't line-height: 1 imply it can fit exactly any text?
我想有些特殊的字符，例如绘制在其行下方的"p"，"g"，"j"(可能还有"_").仍然哪种行为是正确的.是否被认为是溢出?
I suppose some characters are special, such as "p", "g", "j" (and possibly "_") that draw below its line. Still which behavior is the correct one. Is it considered overflow or not?
PS:此外，我发现这很有趣或者 overflow-x: hidden;overflow-y: visible;和overflow-x: visible;overflow-y: hidden;仍然会导致这种情况.在我看来，这更像是一个实际的错误.
PS: Furthermore I find it funny either overflow-x: hidden;overflow-y: visible; and overflow-x: visible;overflow-y: hidden; still causes this. Which seems more like an actual bug to me.
推荐答案
我的问题是哪种行为是正确的.
My question is which behavior is the correct one.
所有这些都是正确的，因为我们在所有浏览器中均没有相同的默认字体，并且根据操作系统的不同而有所不同.
All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.
是否允许特定字符更改行高(我认为应该仅取决于字体)?
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?
字符不更改line-height.更准确地说，line-height是只能通过设置line-height进行更改的属性，但是您可能会混淆line-height定义的行框，并且仅字符不能更改它.
Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.
行高不是:1表示它可以完全适合任何文本吗?
Shouldn't line-height: 1 imply it can fit exactly any text?
不是必须的，line-height:1表示行框将等于1xfont-size 1 ，但是字体设计为包括该空间内的所有字符吗?他们中的大多数人可能会做，但我们不知道.
Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size 1 but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.
基本上，您需要考虑两件事.由字体属性定义的内容区域和由行高定义的行框.我们无法控制第一个，而只能控制第二个.
Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.
这是一个基本的例子来说明:
Here is a basic example to illustrate:
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定义我们要控制的线框.
The red is our content area and its height is defined by the font properties and if you inspect the element you will see it has a height equal to 23px (not 20px like the font-size) and the borders define our line box that we control using the line-height.
因此，如果line-height等于1，我们将有一个等于20px的线框，不足以包含内容区域的23px，因此它将被截断，并且我们可能会隐藏一些字符(或其中的一部分)，这是合乎逻辑的:
So if the line-height is equal to 1 we will have a line box equal to 20px which is not enough to contain the 23px of the content area thus it will get truncated and we may probably hide some characters (or a part of them) which is logical:
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中的下划线:
a different font-size will remove the underscore in 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字体的示例，其结果应该是相同的跨浏览器.下划线可见，但^/¨
Another example with a Google Font where the result should be the same cross browser. The underscore is visible but not the ^/¨
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>
下划线不可见的另一个示例:
Another example where the underscore is not visible:
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>
您可以清楚地看到，每当我们使用其他字体来确认与字体相关时，我们就会有不同的溢出.除非我们知道字体的设计方式，否则我们将无法控制它.
You can clearly see that we have a different overflow everytime we use a different font which confirms that this is font related. We have no control over it unless we know how the font is designed.
相关问题:
这是一篇很好的文章，可以获取更准确的详细信息和计算信息: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
Here is a good article to get more accurate details and calculation: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
本文引述:
很明显，设置
line-height: 1是不好的习惯.我提醒您，无单位值是相对于字体大小，而不是相对于内容区域，并且处理比内容区域小的虚拟区域是我们许多问题的根源.
It becomes obvious that setting
line-height: 1is 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:我考虑了简化的解释，但实际上，线框的计算不仅与line-height属性有关.
这篇关于特定的文字字符可以改变行高吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
