font-size
下面这段代码 font-size 相同,不过 font-family 不一样:
1 | <p> |
1 | p { font-size: 100px } |
由此得到的 span 元素的实际高度各不相同:
- 字体度量
字体度量包括 ascender、descender、capital height、x-height 等。
示意如图所示:
把 Catamaran 字体放到 FontForge 中,分析它的字体度量:
- content-area
从上图可见 Catamaran 字体的 ascender 是 1100,descender 是 540,line gap 是 0。
字体的实际渲染高度 = ascender + descender + line gap
所以 Catamaran 的实际渲染高度是 1100 + 540 + 0 = 1640px,如图所示:
而一个字体的实际渲染高度又被称为 content-area
。
line-height
line-height 和 content-area 的关系可以用下面的图说明:
line-height 和 content-area 高度的差异叫做 leading。leading 的一半会被加到 content-area 顶部,另一半会被加到底部。因此 content-area 总是处于 line-height 的中间
。
当然 leading 的值可以是正的,也可以为负或零。leading 为负的效果如图所示:
height
height 决定了一个标签实际展示的高度(可以认为 height 完全决定了 background-color 的展示区域)。
当 height 大于 line-height 时,会出现下图的效果:
height 小于 line-height 时,会出现下图的效果: