Line-Height与font-size不匹配

Question

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

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

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

编辑:我知道'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-height1em.因此,line-heights分别为60px和14px.由于这与字体大小相同,因此两条线接触(这可能因字体而异).

如果您看到重叠行为,那就是另一个问题.

要更改行为,可以使用不同的行高,填充,边距等.作为旁注,rem单元可能更直观,但旧浏览器缺少支持.

有关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