字体的研究•iOS单行篇

内容简介

之前发布了Android版的字体实验工具，来辅助UI设计师精确地进行设计稿标注。现在，来讲讲如何精确标注iOS设计稿中的单行文字。此外，还提供了OTF版本的苹方字体，由苹果官方版提取，字重和字形与原版完全一致，在Windows和旧版本MacOS系统中均可以正常使用。

ps：目前从网络上下载的TTF版苹方字体，字形和字重均与官方原版不同，甚至还会

引起其他问题，建议彻底删除后安装本文中的苹方字体库。

方法的研究

下面是一个字体测试Demo的iPhone 6s屏幕截图，Demo生成了字号从10pt~25pt的Label控件，布局采用了autolayout。

对列表中的文字进行字号、字高和间距的测量。在这里我列举了15pt和24pt文字的标注信息来帮助大家更好地理解结论。

最终归纳出几个规律：

1.中英混排和纯英文表现一致；
2.字高（行高）与字号的比例为1.2倍，小数会进位取整，比如13.2会变为14；
3.H字符在行中上下居中；
4.左右间距留2px~4px即可，误差不会很大。

在PS中应用

在PS中应用以上结论进行文字标注，以18pt字号为例，英文采用SF UI Text常规，中文采用苹方常规，在UI设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。

第一步，计算出行高，以2x设备为例，18pt文字的行高为：18×2×1.2=43.2，进位取整为44px，所以要绘制一个44px高的布局盒子。

第二步，输入一个H定位字符，字体使用SF UI Text常规，以H字符为基准，垂直对齐布局盒子。

第三步，删除H定位字符，左右间距各留3px，完成！

在Sketch中应用

在sketch中，只需要输入计算出的行高，用Measure等插件导出标注文件就可以了。

Ps：Sketch3.x中，SF和苹方混排时，文字在文本框中无法垂直对齐，在4.x后进行了优化，目前最高的4.8.2已经正常。

字体下载与相关阅读

在UI设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。最后，如果这篇文章让你有所收获，别忘了转发给他人。

相关阅读

字体的研究•上篇：两篇文章解开你对字体开发实现的全部疑问。
字体的研究•下篇：两篇文章解开你对字体开发实现的全部疑问。