Line-Height 与字体大小不匹配

Question

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

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

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

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

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

Answer 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

Answer 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 行。

Answer 3

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

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

Answer 4

增加 CSS 中的行高

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

在 p 元素中。