每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
文字的研究•iOS单行篇终于来啦，此外你还可以获得一款Win和Mac通用的官方版苹果字体。
内容简介
之前发布了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设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。最后，如果这篇文章让你有所收获，别忘了转发给他人。
相关阅读
字体的研究•上篇：两篇文章解开你对字体开发实现的全部疑问。
字体的研究•下篇：两篇文章解开你对字体开发实现的全部疑问。
全部评论：13条
-
-
-
bingxueling
2018-10-29 09:57@wuli颖姐820: 从测试的结果上来说，ios默认的单行文字高度也并非都是偶数哦，但是我个人也倾向于取偶数结果，1px左右的差距其实还是可以容忍的~
-
wuli颖姐820
2018-09-11 19:52大神，上面说的18pt文字的行高为：18×2×1.2=43.2，进位取整为44px 比如 12pt文字 行高：12×2×1.2=28.8；是不是应该取偶数 更为准确？左右间距的话可以忽略不计
-
-
-
zhaojinlei
2018-03-16 15:03大神，sketch中单行文字和多行文字总会自带上下间距，并且这个间距很大，所以从视觉上来看只能缩小文字与其他模块的上下间距，但是开发按照这种标注执行的话，一定与理想的效果有差距，请问怎么处理这个问题？谢谢
-
bingxueling
2018-03-09 08:52@Blue灬心跳: android是有这样的一个接口：getIncludeFontPadding，android的注释：Gets whether the TextView includes extra top and bottom padding to make room for accents that go above the normal ascent and descent.iOS我不熟，不敢说有没有其他的接口，但是这个接口的意思恐怕不是你所认为的结果。这个接口是去不掉字体的大写线到上升沿或者基线到下降沿的空白的，因为这两部分空白本身也是字体的内容区。其实稍微动一下脑子就可以发现：大写的X，和小写的x,文字视觉高度不一样，程序去掉上下空白的话，请问参考哪个文字来消除空白？还是看文字来消除？加入看文字内容消除，开发写了一个文本框，我把内容从X替换成x，文本框高度和位置还会突然改变吗？？我写这么多，只想说清楚一点，做设计师也需要动脑子，自己亲自写代码测试好结论，否则很容易被程序员当傻子耍，此外对于某些结论只是一知半解，最好不要再在公众平台传播，会误导更多年轻的设计师。
-
-
-
-
-
-
bingxueling
2018-02-26 16:39@kongkongcheng: PS和sketch都可以通过调整字间距来增大单个文字的作用间距，如果你只想调整一整行的左右间距，只能通过自己绘制一个box背景框来实现了~开发则可以通过设置padding来增加左右间距。
-
-
bingxueling
2018-02-24 16:36@_xiaojian: 左右间距和字号成正比，比如字号50px之前都是2px，50px的字号左右间距是3px，如果字号更大，比如100px以上，左右间距就是4px，因为UI设计目前用不到50px之上的，所以我就给了一个2-4px的区间，假如你32px的字号，左右各留3px间距，误差也不会很大的。
-
-
-
-
更多作品
发表评论