“字”是多数UI设计师在日常工作中接触频率最高之一，但有关字体自身的细节却又是多数设计师最容易忽略的点，今天来跟大家聊一聊“字”的那些事。

01. 移动端字体的使用规则

众所周知安卓的默认中文字体为「 思源黑体 」，英文为「 Robot 」；IOS中文为「 苹方 」，英文字体为「 San Francisco 」；这里需要重点说明的是「 San Francisco 」还分为「 SF Pro Text 」和「 SF Pro Display 」和两类字体，这两类字体的具体使用规则如下：当字号小于20pt时使用「 SF Pro Text 」，当字号大于等于20pt时则使用「 SF Pro Display 」。大家在输出设计稿时最好严格遵守各平台规格，并且注意中英文字体切换，这样会减少设计稿与落地实现的效果偏差。

02. 字体的基础结构

字体本身的距离是包含升部值和降部值的，具体的升部及降部值是跟字体有关的，每类字体的相关值都是不同的，这里我们举个简单的例子说明一下：当我们的字体使用的是158px时，在使用工具量的时候，也确实是158px，但其实字体本身占用的距离是包含了升部及降部区域的，这样就导致其占用空间大于158px。所以我们在标注的时候，应当按照包含升部降部的实际大小进行标注，这样所还原的视觉效果，也是极为接近设计稿的。

02. 基础属性及参数

在我们日常工作中多数人都会遇到一种情况：“开发同学明明严格按照标注去实现，可是文本内容的落地实现还是和设计稿依旧有着较大的偏差 ” 如果在项目中遇到这种情况的话设计师 / 前端人员一定是忽略了文本的三个参数值  「 字间距 Character 」 「 行高 line 」 「 行距 Paragraph 」 

02-1 字间距 ( character )

在UI设计中字间距通俗的说为两个文字中间的距离，这个距离一般加在一个字符的后段。如图：字符『AB』，默认 字间距 Character 为0，那么两个字符中间的间距则是为字体默认所设定的安全距离。如果给 字间距 Character 设定一个值50，那么会自动在A的后段加上50px，那么显示效果则变成了『A B』

02-2 行高  ( line )

行高为 UI Lable 中字段所占用的高度实际大小，这里的实际高度为字体像素的大小加上升降安全距离外加一个扩高值 ，多数扩高值加在字符的上下区域。我们在日常项目标注中，务必得把line值包含在内，否则实现出来就会出现字体偏移位置不对等情况。

line高度 = 字体像素大小+升降安全距离+扩高值。

02-3 行距  ( Paragraph )

很多人认为行距 Paragraph 与 行高 line 值差不多。但实际上行距 Paragraph 指的是两行中间的间距，通俗的讲就是文本回车折行后字段与字段之间的距离，如图示意

小结

如果大家在设计输出及标注时可以注意这些小细节的话，那么就会大大降低设计稿与落地实现文本偏差很大的问题。最后感谢大家的耐心阅读（下面给大家整理了移动端默认字体下载资源 链接:https://pan.baidu.com/s/1DV0mZLFe-c8R0jVOkdCX5Q  密码:3zmv），希望这篇分享可以为大家提供或多或少的帮助。下一期将会和大家分享字体在界面中的使用。

Powered by Froala Editor