原因分析

分析

客户端眼中的行高

首先我们要知道文字的几个属性，一般有以下几个
• ascent:基准线到文字最高处的推荐距离
• desent:基准线到文字最低处的推荐距离
• baseline：基准线
• top：基准线到文字最高处的最大距离
• bottom：基准线到文字最低处的最大距离
• leading：2行文字的assent与desent的距离
如图：

image.png

所以，可以有这些属性得知：

image.png

这个就是设计师需要的行高数据。但是在移动端上，我们的文字都是由textView控件包裹的，比如在安卓上就有这样一个属性：includeFontPadding。可以看下文档上对它的说明：

image.png

简单来说，就是为了留下足够的空间给文字去拉伸，而不是严格的用文字的asent和desent属性。而这个属性客户端默认都是开启的。同样在ios上也是有相同的留白。

设计师绘制的行高

image.png

以苹果简方为例，在设置单行文字时，一般设计师会将行高设置成文字高度，如果我们直接根据这个测量间距的话，会发现实现的效果比设计图上的上下2边距离会大点。

image.png

而在使用多行文字时，一般会将行高设置为文字大小加行间距。

得出原因

由于移动端上的文字控件，为了更好的显示文字，一般会上下留白。而设计师的设计稿上，是直接包裹文字的，上下并无留白。所以开发在直接用sktech测量间距时，会多出部分距离，导致与设计师要求的不一致。

继续探索

在sktech上，如果不设置行高的话，会生成留白。

image.png

但这个留白与开发的留白高度一致吗？

我们先想下这个留白高度可能和什么有关：

1.文字字体

2.使用平台，安卓,ios，安卓不同厂商

首先字体是会导致留白不一致的。而字体上，ios可以统一，安卓上不同厂商，不同手机可能字体都不一致，但如果app定制字体，无疑会增加app体积。所以我简单的测试了下，探究下是否不同手机的字体大小不一致了？

由于测试机较少，简单的用了小米6,小米8,三星s8，用下面textView跑了下。

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ξτβㄎㄊěǔぬも┰┠"
        android:textSize="34px"
        android:id="@+id/tv_test"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />