专家,
我尝试使用两种不同的字体创建标题,同时保留行高。我将两种字体的字体大小和行高指定为48px。我想要理解的是为什么标题元素的高度为49px。
问题显示在下面的JS Bin中: http://jsbin.com/kelureroze/2/
提前致谢。
答案 0 :(得分:2)
这两种字体的字体指标略有不同,这意味着两种字体从内联框顶部到基线以及从内联框到底部的距离不同。
字体按基线对齐,因此它们的内联框的顶部和底部相对于彼此稍微偏移。
因为h1块的高度是其包含的线框的高度,并且线框必须足够大,以包含从两个内联框顶部的上部到下部的内联框。两个直插式底部,总线高度略大于任一字体的线高。
如果停止两种字体在其基线上对齐:例如h1 font { vertical-align:top; }
你看到h1的高度下降到48px。