深入理解字体：参考线、line-box（行框）、content-area

参考线：

font-size、line-height、font-family、vertical-align

 

文字-字体：

文字是由软件制作的，比如font-forge，每种字体的参考线都不一样

字体参考线：

 

 

 

 

font-size：

我们设置的字体大小，设置的是相对大小，并不是实际大小，

文字默认的相对大小为：1000、1024、2048；就相当与一个框，font-size设置的是框的大小，每个字体不相同。

文字顶线到底线的距离，是文字的实际大小（content-area，内容区）；此区域不可以设置大小，

行盒的背景覆盖content-area区域：

例如当设置font-size为，200px时，  2398/2048 = X/200 ,,

默认：框的大小 ：2048    字体大小 ：2396

font-size=200px时：框的大小：200px ,字体大小 ：X = 233px，

结果背景会大于设置的200px，用span元素包裹看得更清晰。

line-height:

行高：是指顶线向上延伸的空间和向下延伸的空间，向上向下相等，该空间为gap（空隙）；

gap默认由设计字体者决定

top到bottom 叫做virtual-area(虚拟区);此区域可以设置大小，

line-height设置的即为 虚拟区的高度；

line-height：取值

　　　　normal;默认值　　使用字体的gap

 

测试：

结构：{

     <p>
        <span>M</span>
    </p>
}


样式：{

      p{
            background-color: red;
        }
        span{
            font-family: consolas;
            font-size: 200px;
            background-color: rosybrown;
            line-height: 1;
        }
}

　　

 

 

 可以看出，行盒覆盖的时内容区，而块盒覆盖虚拟区；这就解释了为什么 块盒中设置 line-height 为height可以垂直居中；

vertical-align：

font-size 、font-family、line-height 三个确定了参考线’

只要一个元素，包含行盒，那么此元素就会有自己的参考线。

默认情况下：基线对齐，

vertical-align：取值

　　baseline：该元素的基线与父元素的基线对齐。 自己对齐父元素

　　super：该元素与父元素上基线对齐。　　　　 自己对齐父元素

　　sub:该元素与父元素的下基线对齐。　　　　　 自己对齐父元素

　　text-top：该元素的虚拟区的顶边，对齐父元素的顶边（text-top）  父元素对齐自己，故使父元素的基线发生变化，会影响其他元素；

　　text-bottom：该元素的虚拟区的顶边，对齐父元素的顶边（text-top）父元素对齐自己，故使父元素的基线发生变化，会影响其他元素

　　top:该元素的虚拟区的顶边，对齐父元素的顶边（line-box）；

　　middle：该元素的中线（content-area中间），与父元素的X字母的高度的一般对齐

　    bottom:该元素的虚拟区的底边，对齐父元素的底边（line-box）；

　　数值：相对于父元素基线的偏移量，

　　百分比：相对于自身的虚拟区的高度；

　行盒组合起来，可形成多行，每一行区域叫做line-box，line-box的顶边，是此行中最高，底边为最低。

　实际上，高度自动时，高度为line-box的叠加。

line-box（行框）：是承载文字的必要条件；一下情况不生成行框

　　1，元素内部没有任何行盒

　　2，元素字体为0；

 

可替换元素和行块盒的基线；

　　图片：基线在下外边距

　　表单元素：基线在内容底边位置

　　行块盒：

　　　　　　1、行快和最后一行由line-box，用最后一行的基线作为整个行块盒的基线

　　　　　　2、如果内部没有行盒，则使用图片的的方式，作为基线