CSS:了解和调整字体的前导/行高 [英] CSS: Understanding and adjusting leading / line-height of fonts
问题描述
行高是指字体的总高度,包括任何分配的空格。
A very similar question was asked here but the really answered sufficiently...
The CSS line-height property controls the amount of white space above the letters. Making it bigger/smaller spaces rows of text farther/closer together. But if you set the line height to the exact same value as the font-size, the text will still have white space above them.
So this DOESN'T quite work...
div { height: 80px; }
span { font-size : 80px; line-height : 80px; }
<div>
<span>Foo</span>
</div>
http://jsfiddle.net/s_d_p/yMHVs/
The degree to which the enclosed text actually matches the container height seems to differ from font to font.
So my question is two parts:
What are we actually adjusting when we set line-height?
Is there a way to remove it entirely so that letter fit precisely inside their container?
Note that the remaining/extra space is typically a symptom of the font being used, as designated by its designer.
Thus, the 80px includes the allocated white space above and/or below. Additional white space above is typically provided to allow for accented characters, which would otherwise require the letter itself to be compressed- producing an inconsistent typeface.
See here & here for further information.
Line height refers to the total height of the typeface, inclusive of any allocated whitespace.
这篇关于CSS:了解和调整字体的前导/行高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!