参考线-深度理解字体

参考线-深度理解字体

font-size line-height vertical-align font-famliy

文字

文字是通过一些文字制作软件制作的，比如fontforge

制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致

5条 参考线

顶线 text top  \  ascent

上基线  super

基线  baseline

下基线  sub

底线  text buttom \ descent

字体大小和边框的大小之间的相对大小

一般来说，字体大小会超过边框大小

font-size

css样式 字体大小

font-size设置的是文字的相对大小

文字的相对大小：1000、2048、1024

字体的实际大小是顶线到底线的距离(content-area，内容区)

行盒的背景，覆盖content-area

 

行高

顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap(空隙)

空间的边界线分别为top，bottom

gap默认情况下，是字体设计者决定

top到botoom，叫做virtual-area(虚拟区)

行高，就是virtual-area

line-height:normal，默认值，使用文字默认的gap

辨析：

> 文字一定出现一行的最中间——错误

> content-area一定出现在virtual-area的中间——正确

当把行高设置为数值时是相对于文字的相对大小的

设置为1的时候，表示行高和字体的相对大小一样，而文字的实际大小一般会大于文字的相对大小，所以会出现多行文本有重叠的情况

 

vertical-align

决定参考线的样式:font-size、font-family、line-height

font-family 参考线之间的相对位置

font-size 参考线之间的距离大小

line-height  top和buttom之间的距离

产生参考线的元素

1.  行盒

2. 子元素中有行盒的元素（一个元素如果子元素出现行盒，该元素内部也会产生参考线）

vertical-align的预设值：

baseline:该元素的基线与父元素的基线对齐

super:该元素的基线与父元素的上基线对齐

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

text-top:该元素的virtual-area的顶边，对齐父元素的text-top

text-bottom:该元素的virtual-area的底边，对齐父元素的text-bottom

top:该元素的virtual-area的定边，对齐line-box的顶边

bottom:该元素的virtual-area的底边，对齐line-box的底边

行盒组合起来，可以形成多行，每一行的区域叫做1ine-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。

数值:相对于基线的偏移量，向上为正数，向下为负数。

百分比:相对于基线的偏移量，百分比是相对于自身virtual-area的高度

实际，一个元素的实际占用高度(高度自动)，高度的计算通过line-box计算。

行框确定元素的自动高度

行盒:inline-box

行框:line-box

line-box是承载文字内容的必要条件，（没有行框（line-box）文字没有办法显示)

以下情况不生成行框：

1. 某元素内部没有任何行盒

2. 某元素字体大小为0

 

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

图片：基线位置位于图片的下外边距

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

行块盒：  两种情况

1. 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线

2. 如果行块盒内部没有行盒，则使用下外边距作为基线

 

图片的白边问题

原因：图片的基线位于图片的下外边距

一个div块盒里边放一个图片，一个元素内部有行盒，这个元素就会生成行框（line-box） ，那么这个div内部就会有参考线

图片和这个容器块盒的对齐方式是，基线对齐

就会产生白边 因为下外边距和块盒的基线对齐，但是块盒的基线不在块盒的下外边距

解决方法：

1. 把容器块盒的font-size:0; font-size:0;的元素内部不会生成行框，这样就不会有参考线

2.把图片的盒子类型改成块盒( 最好的办法）

display:block;

块盒内部不会有参考线

这样，容器盒子的内部也没有行盒，也不会生成行框，不会有参考线