app设计中字体行高设置

参考文章：https://www.jianshu.com/p/23963b31915d

在ui设计的过程中由于字体行高导致设计的还原出现问题的地方挺多的。

例如我再sketch中设计两个16px的字体，同样的距离在不同行高的情况下会导致他们的间距不同（如图所示）由于在开发中默认间距和sketch不同导致有时候设计稿标注的间距和实际实现出现误差。

下图中我就是用sketch模拟同样在16px字体下不同行高可以看出间距是44px 42px 48px 这也就是开发过程中出现误差的原因

为了搞清楚这个问题我用sketch做了10pt~20pt （sketch中的字体单位是px但是由于是一倍图所以在ios开发中直接对等pt不用转换）ui设计中常用到的字体范围并测量其行高

同时用xcode和html做了一个页面展示字体并设置字体背景色用来测量行高如下图所示

这里解释一下 

1.所有的行高测试都是以iphone8 （750*1334）尺寸测量的的。

2.其中sketch我做的一倍图所以以pt为单位转换为px的画就是x2，

3.还有html由于在头部添加了

`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">`

代码所以我在写代码的时候是按照一倍图的px，其实这里的px相当于pt（我这里不做过多解释其实我也解释不清🙂： 就是加了这个代码后我可以直接按照一倍图给的尺寸写和xcode开发一样只是我单位还是用的px）

还有就是 html的我做了两种情况

第一种是默认的

第二种是css中设置了 line-height: 1;（表示所有的行高和字体高度一样）

所以可以看出

同样的字体出现了各种行高.

这里我们找一下规律（字体大小和行高相对字体高度的增加量）

xcode：

sketch：

html（ line-height: 默认）

这里为了统一还是把字体的大小px变成pt

html（line-height:1）

设置line-height:1后行高就是字体高度

通过上面可以看出

不同的开发模式下字体的行高和字号规律不同，我们要做的事尽量统一来做到减少误差。

要么我们向开发靠拢要么你出规范规定各种字体的行高，

这里我说一下我平常工作中怎么做：

html+css+js（前端）开发的项目一般都会在项目中放入一个css的reset文件来对默认样式进行reset，一般都是设置成line-height:1，这样我们用sketch做设计稿的时候必须把所有的字体的行高都设置成字号大小。

如果是原生iOS的开发那么大家可以看看这个文章（我写的内容也有参考这个文章 表示感谢）

https://www.jianshu.com/p/23963b31915d

文章也有讲解字体问题并且还提供了一个sketch插件，插件的作用就是遍历你设计稿中的字体然后按照iOS开发的 默认行高进行设置。

接下来你就可以愉快的设计了。