1、文字的制作：
/**
（1）、文字是通过一些文字制作软件制作的，比如fontforge；
（2）、制作文字时，会有几根参考线，不同的文字类型，参考线不一样，同一种文字类型，参考线一直；
*/
文字制作辅助线.png
2、字体大小：font-size
/**
（1）、字体大小是相对大小，指的是字体的高度，不是顶线和底线之间的距离；
（2）、content-area（内容区域）：是指文字顶线到底线的距离，是设计出来的文字所占区域大小；
（3）、以consolas字体为例，字体的相对大小是2048（我们假设为2048px）时，这个content-area的距离
实际为2398；如果我们设置字体大小为200px，这个时候content-area会按照这个大小等比缩放；
（4）、但是对于宽度来说，每个字符是不确定的，有的字体可能会设计成宽度全部相等，但是有的字体
可能会不同；
（5）、行盒的背景覆盖文字的内容区域；
*/
3、行高：
/**
（1）、行高的定义：顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫做gap（空隙）；
gap默认情况下是字体设计者决定的；
（2）、virtual-area（虚拟区）：top到bottom之间的距离，叫做virtual-area（虚拟区）；
（3）、默认情况下，由于gap是字体设计者决定的，因此virtual-area是大于content-area的，但是由于
后期的调整，也可能等于或小于content-area；
（4）line-height:normal；是指使用文字设计的默认gap；
*/
line-height.png
4、vertical-align
// 1、一个元素如果内部出现行盒子元素，该元素内部也会产生参考线；
/**
baseline：该元素的基线与父元素的基线对齐；
super：该元素的基线与父元素的上基线对齐；
sub：该元素的基线与父元素的下基线对齐；
text-top：该元素的virtual-area的顶边，对齐父元素的text-top；
text-bottom：该元素的virtual-area的底边对齐父元素的text-bottom；
top：该元素的virtual-area的底边，对齐父元素的顶边（该行中最高的顶边）；
bottom:该元素的virtual-area的底边，对齐父元素的底边（该行中的最低底边）；
middle：该元素的中线（content-area的一半）与父元素的X字母高度一半的位置对齐；
*/
/**
行盒组合起来可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒
最高边，底边是该行行盒的最低底边；
*/
virtical-align.png
网友评论