Line-Height 与字体大小不匹配

Posted 2023-03-15

【中文标题】Line-Height 与字体大小不匹配

【英文标题】：Line-Height does not match the font-size

【发布时间】：2012-08-05 03:47:23

【问题描述】：

当我有两行不同字体大小的文本时，它们会重叠。 看这个例子： http://jsfiddle.net/3WcMG/1/

所有的 'j' 和 'g' 都隐藏了第二行的 to。它适用于所有主要字体。

为什么会这样？我该怎么做才能避免这种情况？

编辑：我知道“em”是什么意思，我知道如何使用边距，我知道如何增加行高，我知道 JSFiddle 的重置 css 的效果是什么，这不是我的问题。我的问题是：为什么“j”的底部不在文本框内？看起来如果我在第二行放置负边距顶部（除了我没有，默认情况下看起来像这样）。 有没有办法让字体适合盒子。

EDIT2：看来是浏览器问题！我在 Mac 上使用 chrome 21.0，我看到：

【问题讨论】：

如果您取消选中jsfiddle.net 左侧菜单中的Normalized CSS 复选框并更新小提琴，您可以看到如下结果：jsfiddle.net/akhurshid/3WcMG/2

这是由于CSS Reset

给你的<p>一些上边距以避免粘两个<p>标签

查看example 和top-margin

【参考方案1】：

1em 等于字体大小的像素数的 1 倍。所以如果你的font-size 是 60px，1em = 60px。如果是 14px，1em = 14px，以此类推。将line-height 设置为 1em 使其等于像素数的 1 倍。

可能会有一些混淆，因为用户代理样式表设置的默认行高通常在 1.5em 左右，因此 12px font-size 会导致 18px line-height。

em 单位 等于“字体大小”属性的计算值 使用它的元素

来源：http://www.w3.org/TR/css3-values/#font-relative-lengths 另见：http://www.w3.org/TR/CSS21/syndata.html#length-units

基于此，您的原始示例正是我希望看到的。作为参考，这是我在 Chrome 中看到的内容：

您的第一行是 60px 高，但第二行的 计算值（W3 的术语）是 14px（由应用于它的类决定）。两者都有 1em 的line-height。因此，line-heights 分别为 60px 和 14px。由于这与字体大小相同，因此两条线接触（这可能因字体而异）。

如果您看到重叠的行为，那就是另一个问题了。

要更改行为，您可以使用不同的行高、内边距、边距等。附带说明，rem units 在旧版浏览器中虽然 support is lacking 可能更直观。

有关 CSS 单元的概述，请参阅：http://css-tricks.com/css-font-size/

字体未与框的边缘对齐

更新的问题/问题

关于更新后的问题，请参阅：http://www.w3.org/TR/css3-fonts/#propdef-font-size，其中指出：

请注意，某些字形可能会溢出其 EM 框。

我尝试过的不同字体在不同程度上发生了这种情况（有些在 X/Y 上都流血，有些在一个方向上，有些根本没有）。

我不确定有什么方法可以改变这种行为，尤其是因为每个浏览器可能使用不同的抗锯齿算法，这会稍微改变字符的边缘。

我认为line-box-contain: glyph 可能是相关的，但我只在编辑草稿中看到它，我确信浏览器支持不存在/不一致。

http://dev.w3.org/csswg/css3-linebox/#line-box-contain

【讨论】：

我通常建议避免引用不稳定的 ED，除非它们是唯一可用或最相关的资源。考虑更改频率较低的 WD w3.org/TR/css3-values/#font-relative-lengths 或更好但稳定的建议 w3.org/TR/CSS21/syndata.html#length-units 尽管 em 单位可能不会永远更改，但链接到更稳定的资源仍然是个好主意:)

已更新以使用您的链接。谢谢。

我明白 em 的意思。问题是字体似乎大于 60px，因为它与第二行重叠。我已经编辑了我的帖子。

@tibo - 很抱歉当时的教程......从你的第一篇文章中不清楚你想要什么。渲染似乎因字体而异；有些在框外略微垂直渲染，有些水平渲染。我不确定是否有比字体大小不完全符合它们应该的框更好的解释（做一些研究）。

@TimMedora 感谢您的更新，这似乎是一个浏览器系统的问题，也许在 mac 上字体有点不同并且重叠......太糟糕了！ :(

【参考方案2】：

默认的行高是相对大小，例如 p 中字体大小的 150%。如果您使用 em 或 % 更改行高，浏览器会将其解释为“em/% 与字体大小相比”。

http://jsfiddle.net/P7LaP/

<div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

该示例具有三组三个 p 标记，具有正常高度、短和高。而三组是字体大小。

p 
    color: ffffff;
    background: #777777;

.short  line-height: 1em; 
.tall  line-height: 2em; 
.small  font-size: 8px; 
.normal  font-size: 16px; 
.large  font-size: 32px; 

我希望这会有所帮助。我不确定您到底要做什么，但看起来您应该从样式表中删除 line-height 行。

【参考方案3】：

你可以给你的“测试”类 line-height 或 margin-top 任何你觉得舒服的东西。

.test
    font-size: 14px;
    line-height:18px;

【讨论】：

这并不能解决我的问题。我需要字体完全在 em 框中，如果我在 mac 上更正 chrome，则行高对于其他平台（例如 windows 上的 chrome 或 mac 上的 firefox）来说太大了

也许您可以尝试将margin-top 分配给班级测试。 jsfiddle.net/3WcMG/12

【参考方案4】：

增加 CSS 中的行高

行高：2em；（从 1 到 2em）

在 p 元素中。