前端布局基础之三字体

字体的构成

字体的高度度量

字体的高度被称为“em”，em 是空间的数字化定义总量。
em的大小（以下均写为: EM size）通常是 1000 单位。
在 TrueType 字体中，EM size 约定是2的幂，通常是1024或2048。

字体高度的各属性

这是一张详解字体设置的图例，图中各个属性的意义：

• baseline (基线): 分隔 ascent 和 descent ，默认字符底端沿 baseline 排列，如图中的P，x，Ё(为俄文字符)。
• ascent (上升): 基线的上部分，字符最高处与 ascent 顶端可能有空白，由 font-family 决定。
• descent (下降): 基线的下部分，字符最低处与 descent 底端可能有空白，由 font-family 决定。
• xHeight (X 字高): 小写字符 x 的高度，由 font-family 决定。
• capHeight (顶面高度): 大些字符 P 的高度，由 font-family 决定。
• lineSpacing (行间距): 在浏览器中一般 lineSpacing = ascent + descent。
• lineHeight （行高）: 默认等于 lineSpacing。
• half-leading (半行距): 如果lineHeight > lineSpacing，则lineHeight 与 lineSpacing 之间会产生上下相等的空隙 (lineHeight - lineSpacing)/2 称为半行距（half-leading或 half lead strips）。

所以，我们的结论是：
0、设置 font-size:100px，不同font-family的字体所占高度不同。

image.png

1、因为一个字体默认所占的高度是通过ascent和descent，也就是lineHeight来决定。
2、如果一行里面有不同的字体，该行的高度是由有最大lineHeight的字体来决定。

3、不同font-size的字体为了vertical-align对齐，也会改变一行文字所占高度。

4、css属性line-height可以改变字体所占的高度。但是它基于字体的font-size。

字体渲染

• 点阵字体
  点阵字体是把每一个字符都分成16×16或24×24个点，然后用每个点的虚实来表示字符的轮廓。

  
  
  点阵字体
  
  

  缺点：一旦放大后就会发现文字边缘的锯齿。
  优点：适合LCD电子屏幕展示。

• 矢量字体
  每一个字形是通过数学曲线来描述的，它包含了字形边界上的关键点，连线的导数信息等，字体的渲染引擎通过读取这些数学矢量，然后进行一定的数学运算来进行渲染。
  这类字体的好处是字体可以无限放大而不产生变形。
  矢量字体的后缀通常是.ttf，.otf。
  包含一系列TrueType字体的字体包文件，那么后缀名为.ttc。

字体设计

serif（衬线字体）和 sans serif（无衬线字体）

了解这两种字体，是用来优雅降级：先衬线后无衬线。
无衬线字体也比较适合LCD电子屏幕展示。

font-family:"PingFangSC-light","Helvetica Neue",“Hiragino Sans GB”,“Helvetica”,“Microsoft YaHei”,“Arial”

常见字体相关问题

1.字体发虚
解决方案：

transform:perspective(1px) scale(1.185) ;

或者

-webkit-font-smoothing: subpixel-antialiased;

2.IFC
IFC(Inline-Formatting-Contexts)即内联格式化上下文布局。一般都是行内元素比如：input a img span 以及display 属性值为inline-block的元素。
1、行框会从包含块的顶部开始，一个接一个地水平摆放。
2、摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑； 在垂直方向上，这些框可能会以不同形式来对齐： 水平的margin、padding、border有效，垂直无效。不能指定宽高。
3、行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定。
你要去理解包含块(containing box)和行框(line box)的概念。

参考

https://zhuanlan.zhihu.com/p/25808995
https://juejin.im/entry/5acdc54c51882555867fc7fd
https://www.zcfy.cc/article/deep-dive-css-font-metrics-line-height-and-vertical-align-vincent-de-oliveira