专家们,
我正在尝试使用两种不同的字体创建标题,同时保留行高。我将两种字体的font-size和line-height指定为48px。我想了解的是为什么标题元素的高度为49px。
该问题显示在下面的JS Bin中:http : //jsbin.com/kelureroze/2/
提前致谢。
两种字体的字体规格略有不同,这意味着这两种字体从内嵌框顶部到基线以及从基线到内嵌框底部的距离是不同的。
字体按其基线对齐,因此它们的内联框的顶部和底部相对于彼此略有偏移。
因为h1块的高度是其所包含的线框的高度,并且该线框必须足够大以容纳从两个线内框顶部的上部到两个线内框下部的两个线内框。框底部,总行高略大于任一字体的行高。
如果您阻止这两种字体在它们的基线上对齐:例如,h1 font { vertical-align:top; }
您会看到h1的高度下降到48px。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句