HTML/CSS:在保留行高的同时混合字体



专家

我试图用两种不同的字体创建一个标题,同时保留行高。我将两种字体的字体大小和行高都指定为48px。我想了解的是为什么heading元素的高度是49px。

问题显示在下面的JS Bin中:http://jsbin.com/kelureroze/2/

提前谢谢。

这两种字体的字体度量略有不同,这意味着两种字体从内联框顶部到基线以及从基线到内联框底部的距离不同。

字体按照它们的基线对齐,因此它们的内联框的顶部和底部相对于彼此稍微偏移。

因为h1块的高度是其包含的行框的高度,并且行框必须足够大,以涵盖从两个行框顶部的上部到两个行盒底部的下部的两个行方框,所以总行高度略大于任一字体的行高度。

如果你停止两种字体在它们的基线上对齐:例如h1 font { vertical-align:top; },你会看到h1的高度下降到48px。

请参阅http://jsbin.com/hisihojozi/2/edit

最新更新