从Sketch到IDE——行高和行间距的换算
如何精准还原设计稿中的文本排版
行高-字号=行间距？
在Sketch或其他类似设计软件中，关于字体样式最常用的两个参数就是字号和行高。如果仅仅为网页设计，那么这些数据可以直接使用，CSS的line-height与Sketch的Line一样，效果也差不多。但在iOS和Android上，方法就不一样了。
下图中文字大小为24pt，行高36pt。如果文字只有一行，你会发现文字图层的高度也是36。多行文字的话，文字图层整体高度就是行高*行数，图中5行文字的高度就是5*36pt=180pt。在Sketch上这些都很直观易懂。
但是在iOS和Android上情况就不同了。在这两个系统中，如果想改变文本的行高，就得改变行间距，一般来说并不会直接设置行高。
你可能要说，用行高减去字号，不就是行间距了？比如上图右边，36-24=12pt，行间距设为12pt不就跟Sketch中表现一样了吗？
也许吧，除非世界上只有一种字体，文字只有汉字。
当Line Height=1
产生这种错误想法的原因就在于，字体不止是苹方和思源黑体，文字也不仅仅是汉字。
除了书法字体，汉字一般都是方方正正的，每个字的字形高度都跟字号一样，所以我们往往忽略了其他情形。然而现实是每种字体的设计风格都不同，因此尽管字号相等，不同的字体在1倍行高时的高度也不会相等。也就是说，文字高度不一定等于字号。如下图：
每个字体都是16号，但是字形的高度显然不相同。这点在手写体尤为明显，Zapfino在16号时的字形竟然有54pt高！
第二，正如Sketch的文字排版策略(译)里提到的，在斯拉夫语族和罗曼语族的文字里，会在拉丁字符上下加各种符号：
所以当你认为所有字都会像左边一样高时，实际上因为其他文字的存在，文本的高度其实是右边的样子，比你想的要大一些。
因此，如果你按行高-字号来设置行间距，实际效果一定会比你想的要大一点。
间距的偏差
弄错行间距除了会影响阅读以外，还会影响文字与其他元素的间距。
比如说下面这张图，文字的字号是16pt，行高28pt。不管你是导出标注到蓝湖、Zeplin，还是直接给开发源文件，如果开发真的按Sketch把这个距离设为16pt，在设备上的实际效果会比预想的要小一点。
因此我们需要知道在这两个系统下，不同字号对应的一倍行高的高度是多少，才能让不同系统的表现跟设计稿尽可能一致。当然，这里只讨论苹方和思源黑体。
真实的行高
如果没有特意更改iOS字体，行高大概等于字号的1.2倍。注意，如果修改字体为PingFang，就会变成1.4倍。
Android情况会稍微复杂点，它的行高倍数会随着字号变动。下面给出常见字号对应的行高：
| 字号 | 默认行高 | 倍数 |
|---|---|---|
| 28 | 38 | 1.36 |
| 24 | 32 | 1.33 |
| 20 | 28 | 1.4 |
| 18 | 24 | 1.33 |
| 16 | 22 | 1.375 |
| 14 | 19 | 11.36 |
| 12 | 16 | 1.33 |
| 10 | 13 | 1.3 |
可以看出大致在1.333左右浮动。
如何应用
知道真实的行高以后，我们就能：
- 将Sketch中的Line转换成客户端的lineSpacing；
- 将标注稿中的间距换算成更接近设计稿的距离。
lineSpacing
给出计算公式：
s=h-tx
s：lineSpacing，行间距。
h：Sketch中设置的行高，Line的大小。
t：行高倍数。
x：字号。
iOS对应的t值是1.2，Android下的t值可查看上方的表格。
比如在设计稿中你设置了一个18号字，行高为32。按照这个公式，iOS下的行间距应该是：
32-1.2*18=10.4≈10pt
Android下的行间距是：
32-1.33*18=8.06≈8
或者直接用表格中第二列中的24代替tx，可以得到精确的值：8。
Margin
如果是文字的外边距，即文字与其他元素的距离呢？
继续上公式：
m=p+(h-tx)/2
m为开发需要的间距；
p是Sketch中文字与其他元素的距离；
h-tx就是上一个公式中的行间距，这里需要除以2。
再次以刚才那个18号字行高32来举例，假设这个文字图层距离容器上边的距离为16，那么开发应该把这个值设置为16+(32-1.2*18)/2=21pt。当然，这里仅仅是为了和设计稿效果尽量一致，不代表实际中也得这么算。
事实上，为了在视觉上的距离更接近你想要设定的16，应该把这个公式反过来使用。即已知m为16，求SketchVS的p值。在这个例子中，p等于11。
为了方便计算，可以把常用字号对应的速算值整理成表，用得多了以后心算就快了。
从Sketch到IDE——行高和行间距的换算 由 李大毛 采用 知识共享 署名-相同方式共享 4.0 国际 许可协议进行许可。
本许可协议授权之外的使用权限可以从 https://www.darmau.com/policy/ 处获得。