看看这个例子：
http://jsfiddle.net/3WcMG/1/
所有’j’和’g’都隐藏了第二行的.它适用于所有主要字体.
为什么会这样？我该怎么做才能避免这种情况？
编辑：我知道’em’是什么意思,我知道如何使用边距,我知道如何增加行高,我知道JSFiddle重置css的效果是什么,这不是我的问题.我的问题是：为什么’j’的底部是开箱即用的？看起来如果我在第二行放置负边距顶部(除了我没有,默认情况下看起来像这样).
有没有办法让字体适合框.
EDIT2：这似乎是一个浏览器问题！我在Mac上使用chrome 21.0,我看到：
解决方法
可能存在一些混淆,因为用户代理样式表设置的默认行高通常在1.5em附近,因此12px字体大小将导致18px行高.
em unit
Equal to the computed value of the ‘font-size’ property of the
element on which it is used
资料来源：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.因此,线高分别为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,其中指出：
Note that certain glyphs may bleed outside their EM Box.
这种情况在不同程度上发生了我尝试过的不同字体(有些是X / Y,有些是一个方向,有些则没有).
我不确定是否有任何方法可以改变这种行为,特别是因为每个浏览器可能使用不同的算法进行抗锯齿,这可能会略微改变角色的边缘.
我认为line-Box-contains：glyph可能是相关的,但我只在编辑器的草稿中看到它,我确信浏览器支持不存在/不一致.
