android 文字大小设计,为什么设计稿的文字大小和开发的不一致

原因分析

分析

客户端眼中的行高

首先我们要知道文字的几个属性，一般有以下几个

• 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跑了下。

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" />

image.png

三部手机的数据完全一致!所以不同厂商的因素可以暂时不考虑，字体安卓上统一困难，也不用考虑。那么就剩下

安卓，ios，设计稿是否一致了？

简单的测试下，得出下面表格：

文字大小/px

20

24

28

32

36

40

44

48

安卓

28

33

38

43

49

54

59

65

ios

设计稿

28

33

40

45

50

56

62

67

可以看出，安卓与设计稿还是会有些许差距，但差距不大。

结论

我们可以按以下流程开发:

需要设计师将设置的行高去除，行间距可以通过段落属性设置。

开发根据新的设计稿重新测量，数据基本符合要求。

image.png

还原到PingFang的字体行高之后，行间距为3，按照这个行间距设置即可。

屏幕快照 2019-10-22 下午6.22.47.png

iOS 使用苹方字体既可以： [UIFont fontWithName:@"PingFangSC-Regular" size:13]

但需要注意的是，还是会产生误差。