Line-Height与font-size不匹配

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 unit
  等于的'font-size'属性的计算值   使用它的元素

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

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

你的第一行是60px高，但第二行的计算值（W3的术语）是14px（由应用于它的类决定）。两者都有line-height的1em。因此，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

增加CSS中的行高

line-height：2em; （从1到2em）

在 p 元素中。

Answer 3

无论你觉得什么都可以，你可以给你的“测试”类行高或者余量。

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

Answer 4

默认行高是相对大小，例如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; }

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