草珊瑚理解IFC(inline formatting context)

1. 认识字体font-family

字体渲染的实际高度,
由字体本身的设置(升部ascender,降部descender,大写字母高度Capital Height,小写字母高度X-Height等等)

用户定义的font-size
来决定。

所以同样的font-size,不同的font-family会产生不同高度的元素。

比如Catamaran字体,
em-square是1000个单位。
升部是1100,降部是540。
在Mac OS上的HHead Ascent/ Descent值,Windows上的Win Ascent/Descent值(这些值可能是不同的!)。
Capital Height(大写字母高度)是680,X height(小写字母高度)是485。

这说明font-faimly:100px的Catamaran字体,content-area(字体渲染后的实际占用像素)为164px。
大写字母是68px(680单位),小写字母(X字高)高49像素(485单位)。

2. 理解line-box

line-box的高度由
子节点的最高点

子节点的最低点
来决定。

具体来说line-box的高度由子节点的font-size,font-family,line-height,vertic-align决定。

3. 什么是line-height

line-height是指字体的行间距值,简称行高。
line-height所决定的区域如图所示。

注意:它不是基线之间的距离。
line-height:normal;时,行间距大小其实就是content-area大小。如下

line-height:1;时,行间距大小由font-size来决定。如下

这时行间距大小很可能跟content-area不同。
这样就导致行之间的文字可能会重叠。

下面两个场景展示了不同的line-heightline-box高度的影响。

  1. 当子节点line-height:normal;vertic-align:base-line;font-size:100px;一致,而font-family不同时

    我们看到,第二个line-box比其他的高,因为第三个ba使用了Catamaran字体。其content-area为164px,比其他字体高。

  2. line-height:200px;vertic-align:base-line;font-family:Catamaran;一致,而font-size不同时

    我们看到这时line-box被撑高起来了。
    因为第二个Ba为了与第一个Ba进行基线对齐,第二个Ba下沉了。

  3. 当父元素的font-family和子元素的font-family不同时
    比如下面代码

<style>
p {
    line-height: 200px;
}
span {
    font-family: Catamaran;
    font-size: 100px;
}
</style>
<p>
    <span>Ba</span>
</p>

的渲染效果

为什么会这样?
这是因为浏览器进行计算时,会以每行line-box的一个零宽度字符开始,这一规范称为strut。
零宽度字符的行间距大小,是以父元素为准。
所以这个p

4. 什么是vertical-align

vertic-align有四个值,其中
vertical-align:top/bottom对齐到父节点的line-box的顶部或底部
vertical-align:text-top /text-bottom对齐到自身的content-area的顶部或底部
如图

注意垂直对齐是以行间距区域开始。如图

5. 总结

  1. 文本之间的垂直对齐,靠vertical-align不靠谱。
  2. 垂直对齐,还是得靠font-size,font-family,line-height,vertic-align各种一致。
    且自己手工微调吧。

参考链接:

入理解CSS:font metrics, line-height 以及 vertical-align
Deep dive CSS: font metrics, line-height and vertical-align

posted @ 2017-05-04 11:06  草珊瑚  阅读(592)  评论(0编辑  收藏  举报