字库设计与运用（三）
了解字体大小、行高和行间距之间的关系
基本概念
行高与行间距从字面意思很容易理解，但是从布局和样式来说，应该更深入理解其属性的关系，比如字体的大小、行高和行间距之间的关系。理解了这些知识后有助于合理的设计字形。
什么是行间距？据说古时候我们印刷出来的文件，其文字，都位于独立的方块中。行间距就是控制两行文字垂直距离的东西。什么是行高呢？在 CSS 中行高是指文本行基线间的垂直距离，也是来控制行间距的东东。
基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是 font-size 的大小，行距的一半是半行距。
当 font-size 等于 line-height 时，行间距等于零，两行文字刚好相切；当 font-size 大于 line-height 时，行间距为负值，两行文字会重叠；当 line-height 大于 font-size 时，行间距为正数，就会有行间距。如下图：
取值，一般情况下，浏览器默认的 line-height 为 1.2。可以自定义 line-height 覆盖这个初始值，那么该怎样设置 line-height呢？有以下5种方式：
看起来如此简单~ 但是，line-height 是个可继承属性，它的继承规则有那么一点点复杂……
继承
需要提前说明的是：line-height的大小与font-size息息相关，除了指定line-height为多少px，剩下的设置方式都是基于font-size算出来的。 下面逐个讲一讲~
1、line-height 设置为 normal 的时候，行高取决于浏览器的解析，一般是1.2。 line-height 设置为 normal 的元素，其子元素不再继承其 line-height 计算后的最终值，而是根据子元素自身的 font-size 进行计算。
2、如果既想要 normal 的灵活，又想设置一个自定义的值，那就要用纯数字，纯数字方式与 normal 唯一的不同，就是数值的大小，纯数字可以自己随意设定，而 normal 的值是浏览器决定的。
3、length 假设设置 line-height 为 48px，那么该行的该行的行高就是 48px，与 font-size 无关，不会随着 font-size 做相应比例的缩放。 这个长度值（48px）会被后代元素继承，所有的后代元素会使用这个相同的、继承的 line-height (48px)，除非后代元素设定 line-height。
4、百分比，假设自身的 font-size 为16px，line-height 设为120%。那么其行高为：16 * 150% = 24px。即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的 line-height，那么它继承的是什么呢，百分比（150%）？还是24px？ 答案是后者，24px，即父元素line-height计算后的最终值。
5、inherit 这个其实没什么说的，继承父元素 line-height 的值，所以父元素的是多少就是多少。 如果其后代元素不设置line-height 的话，也会是这个值。
总结如下：
所以前端工程师在还原设计稿时根据不同情况可以用不同的方式来实现设计稿中文字排版的行间距。
设计中的问题
UI设计中用 Sketch 输出的设计稿交付工程师后还是会遇到很多问题，
尤其文字的行间距、文字与页面其他元素的间距最容易出问题。导致的原因有很多，如有的是设计师不调整 Sketch 中的文字行高属性，有的是工程师不注意行高，主要原因是 Sketch、iOS系统、Android系统、HTML5 之间的默认行高值都不相同。所以开发最终实现的会与设计稿有差异。
下图是用 Sketch 模拟 48px 字体大小在不同行高下的行间距差异：
既然行高是影响行间距的主要参数，所以我们把Sketch、iOS系统、Android系统、HTML5的默认行高都测量一下：
以上都是根据iPhone6手机的2倍图测试的，字体大小之间的换算大家要多注意点，Html5统计的数据都是计算大概的，因为根据字体、浏览器和浏览系统不同，默认行高会有所变化。
安卓的统计数据和结论公式：字体高度=（字体大小+0.00000007）/ 0.7535）来自简书（SLTPAYA）
通过上面测量的数据可以看出不同的开发模式下字体的字号和默认行高规律是不同的，所以我们为了减少误差，要尽量规范字体属性参数同步给开发，具体方法不固定，要看你和开发之间的配合，之后我也会分享我的做法。
切记在用Sketch时要手动调整字体的行高，不能使用Sketch默认行高。这几期了解点字体的基本属性，下一期分享如何设计自己的字库了，敬请期待~
