南沙移动网站建设/友の 连接

参考文章：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由于在头部添加了

``

代码所以我在写代码的时候是按照一倍图的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的开发那么大家可以看看这个文章(我写的内容也有参考这个文章 表示感谢)

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

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