如何精准还原设计稿中的文字
验收开发的页面时，发现文字部分实现出来有很大的出入，和开发商量用半天时间调试了，最后能做到98%的还原，下面来分享一下。
最近在做一个理财金融类的APP，里面涉及到大量的字段展示，收益率/起购金额/购买日期/项目规模等等，许多文字信息排在一起的时候就会发现开发实际实现出来的界面与我设计的有很大的差别，仿佛买家秀和卖家秀，在我查阅了一些资料，看到一些同行总结的经验之后，和开发共同调试，最后终于能够精准还原我的设计稿，在这里做个简单的分享，希望能够帮到有同样困惑的大家。
文字中几个基本概念
首先我们要了解构成文字的一些基本概念。其实我们在设计软件中创建出来的文字高度，不仅仅是包括文字本身的高度（字高），还包括文字上下空出的部分，字高加上下空出的部分之和就是行高；另外每个文字拥有自己的基线，也就是图中的红色线，基线与基线之间的距离也是行高。
偏差产生的原因
1.标注时忽略了行高，只标注了文字与文字之间的距离。
eg：如图，同样的字体大小，同样的视觉距离，因为基准不同，有了14px的差距。
2.注意了行高的存在，但设计与开发时的默认行高不同。
我们使用设计工具（我用的是sketch）创建文字时，会有一个默认行高；开发时程序员创建的文字也有一个默认行高，这两个默认行高可能会有出入。
eg：图中同样为36px大小的字体采用了不同的行距时，单行间存在11px的差距，而总高之间的差距达到26px。
3.其他细微的因素，但因为差距不大，所以基本可忽略。
如对齐方式不同，有些向上对齐，有些向下对齐等。
统一与开发的默认行高
了解了以上文字的内容之后，我们可以明确，只要我们标注清楚字号大小和行高，我们的设计效果就基本可以精准还原，但如果我们每一段文字都需要标注行高的话其实是很费时费力，而且很多情况下我们都是使用默认的行高，那这个时候我们就要和开发统一一个默认的行高，以下是我从网上找到的ios与安卓默认的开发行高。
ios数据来源：知乎问答：https://zhuanlan.zhihu.com/p/38322447
安卓数据来源：公众号约克想说，作者York01
我们可以看到ios和安卓的开发默认行高是有差距的，其中ios的默认行高其实是有一定规律可以寻找的，但是安卓不同，很难记忆，基本没有规律可循，所以我用到了自动修复行高的插件。
安卓修复行高插件：https://github.com/zz379/AutoFixAndroidTextLineHeight
iOS修复行高插件：https://github.com/youngxkk/AutoFixiOSTextLineHeight
感谢开发工程师的插件贡献，鞠躬🙇♀️
一个小例子🌰
下图是一个标注的例子，红色线和绿色底框在实际标注时是不存在的，这里为了方便理解加上的。
绿色字体为文字大小，红色为间距，默认行高时没有标注，实际交付过程中，可以忽略文字大小，因为现在的标注工具（蓝湖/像素大厨等）都可以直接看到文字大小，我个人的标注习惯是仅标注间距与特殊行距。
以上内容经过我和开发人员的共同验证，基本能够完美实现设计效果，所以写出来分享一下，希望对正在头痛开发效果不能还原的设计师有所帮助～
