sketch里的ios控件_如何在 Ps 里还原正确的行高及行间距

在用 Ps 做 App 的视觉设计时，关于字体的显示是一个令人头疼的事情。前端开发写出来的样式总是会出问题，元素距离文本的间距以及多行文本的行间距永远对不上，即便是前端按照标注写出来的效果也依然是如此。所以经常要跟着开发目测调整，这个上去一点，这个下去一点...

直到有一天我不小心看见了开发哥哥抽屉里那把 20 米长的大刀，出于保全小命，我开始思考这问题到底出现在哪里。

字体的属性

为了弄清楚这个问题，得要了解一些字体知识。关于字体的属性有很多，但是这个问题下我们重点关注三个，行高、行间距以及 Ps 里面的行距。

上图可以看到，行高的范围会比实际字体的大小要大一些。另外每一款字体都会自带一个默认的行高值，也就是说不同的字体行高不一定是一样的。

行间距，这是一个在多行文本才会有的属性。值得注意的是 Ps 里面并没有这个属性，与之相关的是另外的一个属性——行距，这两者的转换是一个很重要的点，后面会详细说明。

Ps 里面的字符显示

上述的行高和行间距字体的属性，开发都是可以手动调节参数的，但事实上开发根据 Ps 或标注工具的参数来调整，写出来的效果却和设计稿有很大的差异。这里的偏差正是因为 Ps 里面字体展示的参数并非是我们常说的行高和行间距。

1.行高——从上面提到行高的图片可以看到，字体自带的行高是会比字体的高度要高出一些的，程序也是基于这样逻辑渲染的。然而 Ps 里面的字体显示却没有带出行高这一个参数。也就是说在做图的时候，测量元素与字体的距离是计算到字体实际有像素的范围，而不是行高的范围。正是因为这样的原因，导致开发按照我们给出的间距参数写出来的效果往往会比设计稿要大一些。

2.行间距——打开 Ps 的字符窗口，会发现里面并没有行间距这样的选项可以调节。但是里面有一个叫行距的选项，很多人会以为这两者是同一个东西，直接就按这个参数给到开发，但是因为两者差距巨大，开发写完发现效果不对就又开始了目测手动调整了。但事实上 Ps 里面的行距是等于行高+行间距的一个值。

解决方案

经过一阵子的折腾，终于搞清楚了问题的根源，就是我们将 Ps 的参数理解错误以及不清楚 Ps 的字体显示规则。所以现在的思路就是找到合适的方式调整设计稿，让字体的显示以还原真实的情况，同时让开发拿到准确的数值，直接使用，不再目测。

1.行高问题，对于 iOS 而言，系统用的是统一的字体，所以只要找到苹方的默认行高数值，然后在 Ps 里还原对应的行高就可以了。关于苹方的行高，有很多人去做过测试了，我这里直接使用 @五道口大鲨鱼 的数值。另外在实际的实践过程中，我发现 Android 系统的字体展示和 iOS 的行高很接近，在两端都使用以上的行高标准，暂时没有发现比较明显的问题。

图片内容来自 @五道口大鲨鱼 的文章

拿到了行高的数值后，接下来要做的就是在 Ps 里还原行高了。

说到这要提一下 Ps 里面字体显示的两个模式，点文本和段落文本。点文本刚才提到了，测距是按照字体有像素的范围开始算起的，显然是不行的。要使用段落文本的方式实现行高，段落文本会有一个显示范围并且可以调整大小的文本框，在测量时候会测量到文本框的范围而不是字体有像素的范围。所以就可以根据上述得到的字体默认行高，去调整文本框的高度，从而实现行高的显示。

在用段落文本去实现行高的时候还遇到了另一个问题。由于 Ps 本身是没有显示字体行高的，当用文本框去模拟行高时，就会发现字体在框内位置有偏差，有些大字号甚至还超出了文本框的范围。所以为了实现行高的效果，还需要去调节字体的基线偏移。好在基线偏移的量跟字体的行高会有一个对应的关系，下面会将这些内容整理一个表格供大家参考。

2.行间距的问题，上文提到了 Ps 的字符面板没有行间距的选项，只有行距。行距=行高+行间距，而在第一点里确定了行高的值，所以只要用 Ps 提供的行距减去对应字号默认的行高，就可以得到我们想要的行间距了。

至此，关于行高、行间距不正确的问题基本已解决完毕。接下来说说在多行文本下，如何计算出整个文本框准确的高度。准确的高度，能让设计稿还原真实的情况。

以一个两行的文本为例，他的高度等于两行文本的行高加上中间一个行间距的高度，注意文本的上下部分是不包含行间距的。得出文本框的高度=（行距*文本的行数）-（行间距）。

小结，根据上述问题解决过程所需的参数，最终会制成一个总表。该表格包含了常用字号对应的默认行高值以及字体基线偏移值。

像在设计稿上还原程序真实显示的问题，在 Sketch 上有很多设计师和程序员都早已提供了解决方案，甚至还开发了插件让大家可以方便使用，但由于 Ps 已不再是主流的 UI 设计工具，大家也就不管不顾了。其实这个问题我在三年前就遇到了，因为后面使用的工具是 Sketch，就没有过多留意它。最近因为转回使用 Ps ，才有机会亲手解决掉它。唯一遗憾的是文字显示调整起来略繁琐，却不能用程序自动调整。不管怎样，希望能帮助到有这方面困扰的人吧。

参考文章

Gao JiJi：iOS 文本对齐，如何像素般精确还原设计稿​zhuanlan.zhihu.com

五道口大鲨鱼：聊一聊 Sketch 与 iOS 文字的行高​zhuanlan.zhihu.com