看懂文字样式的一切，实现100%还原度

你是不是有时候发现，设计稿上明明各元素间距、尺寸什么的都搞定了，每到文字这一块就不确定了。

计算好了下面这个按钮应该可以放4个字，可谁知它到第3个字就折行。

按理说3行文本的高度应该刚刚好，可就是比预想中短了一截。

每次都要来回调整几次，不累吗？

其实很多设计稿无法100%还原的问题就在文字格式上，简单来说就是字体、字号、字间距、行高、段落间距、字间距这几个参数在捣乱。

好在我做设计之前写了几年前端，这个问题才比较有经验，这次就给大家好好讲讲。

字体

首先，你设计稿的字体如果和开发实现所有字体不同，无论怎么调参数，都是不可能完全还原的。

iPhone / Mac 系统中文字体是苹方体（Pingfang SC），英文字体是 San Fancisco Pro  （SF Pro）。

Android 系统中文字体是思源黑体（Noto Sans SC），英文字体是 Roboto。

不过以上字体对于网页来说都用不太到。

因为大部分人都 Windows 系统里既没有苹方又没有思源黑体，所以一般网页用微软雅黑比较多（Microsoft YaHei）。

如果你缺少以上字体，可以在文章底部查看下载方式，我都帮你整理好了。

字号

这个数字，其实就是字体的裸高，这一点对于中文和英文都是一样的。

例如尺寸为24px的文字，在行高100%的情况下，所占据的高度就是24px。

行高

刚才提到了，100%的行高就是文字本身的高度。而行高就是多行文本排列时，每行实际占位高度。

行高>100%时，每行文字之间出现间距，便于阅读。

行高=100%时，每行文字之间没有间距，过于紧凑。

行高<100%时，每行文字之间出现重叠，难以阅读。

网站开发没有默认行高是100%，所以设置网站时设计稿需要确定行高。

而有的平台，手机App提供默认行高，没有必要修改或者不方便修改的。这种情况，最好是设计师自己去确认行高，以防止设计稿与落地页差距较大。

如何确定行高？非常简单，将开发出来的界面截图下来，在绘图工具上输入相同文字并选择相同的字体和尺寸后，调整行高数值，直至贴合位置。其它所有参数都可以通过这种方式确定。

行高也可以像文字尺寸一样，用px等其它单位，但是我个人推荐使用%，因为这样可以轻松保证不同尺寸的视觉效果是一样的。

段落间距

首先要搞清楚，你输入一段很长的文字，这段文字自动折了很多行，也依旧只有一个段落。

段落是只有在你输入“回车”，主动换行时，才会出现。

现在很多产品（例如微信等）会将段落间距设置为零。区分两个段落时，通常需要自己空一行。

微信消息框

不过也有一些产品（如知乎等）提供了一定的段落间距，这样就不需要使用空一行的方式来区分段落了。

知乎答题框

设计稿上的文字是否需要段落间距，这个问题可以由设计师来决定。

但是，很多工具不支持用%设置段落间距，而必须使用固定数值如5px。这样就可能需要考虑给不同尺寸的文字设置不同大小的段落间距。

字间距

字间距就是单字之间的距离，一般很少用的，主要是涉及标题时用的比较多。

通常单字的宽度是被字体包确定的，例如中文的话，单字通常就是统一的正方形，即宽=高。

英文和数字的单字宽度通常是不统一的（很早以前是统一的，但由于视觉效果的考量，而改成了不统一）。

字间距则可以控制单字之间的距离，设置成正数就增加间距，设置成负数就是缩减间距。

由于缩减间距会导致重叠，所以增加间距但情况比较多。

字间距也通常不支持%，通常需要设置固定数值，如+/-4px。

下载iPhone/Android系统字体和微软雅黑字体

右下角点亮 在看

，后台回复  常用字体