在开发工程师与设计师配合过程中,经常会遇到的问题就是设计师提供设计图,开发工程师严格按照设计图开发完成,但结果就是无法做到设计稿完美还原,需要在后期进行视觉走查的过程中进行微调,占用开发时间,本着效率优先,寻找解决方案,过程中也带来了一些个人思考,在这里和大家分享一下。
原因探讨
原因很简单,其实用一张图就可以解答清楚,但目前网上流传的很多图片本身就存在问题,或者说没有问题,原因我之后会说。
我们先来看一下Android Developer Document里对FontMetrics的介绍:
name | description |
---|---|
ascent | The recommended distance above the baseline for singled spaced text.(在单行文字里距离baseline之上推荐的距离) |
bottom | The maximum distance below the baseline for the lowest glyph in the font at a given text size.(距离baseline之下最大的距离) |
descent | The recommended distance below the baseline for singled spaced text. (在单行文字里距离baseline之下推荐的距离) |
leading | The recommended additional space to add between lines of text.(在行间距推荐的额外空间) |
top | The maximum distance above the baseline for the tallest glyph in the font at a given text size.(距离baseline之上最大的距离) |
然后看下目前关于FontMetrics使用比较广的图:
这张图其实已经很形象的展示了ascent、descent、leading和hight的关系,貌似没看到bottom和top,别急,接下来我们在Android里面把这5个参数画出来,看图:
从上往下分别是:top、ascent、baseline、descent和bottom,leading一般都为0,我们可以看到,ascent并没有完全贴合在Apple上面,和设想中的并不一样,主要原因是Android里面的字体为了兼容更多的语言,留有特殊符号的空间,例如"ÄÖÜ",所以图一其实误导了开发者,但说图一大错特错其实也不对,我们可以在Typeface Wiki里面找到答案:
The ascent and descent may or may not include distance added by accents or diacritical marks.
这句话的意思就是ascent和descent有、或者没有包含变音符。
关于FontMetrics的使用,可以看下博文自定义控件其实很简单1/4,写的非常棒,在这里我就不复述了,推荐大家去看下。
方案思考
OK,我们其实已经找到原因了,但并没有找到完美的解决方案,虽然Android心怀好意给我们考虑了变音符的空间,但对我们而言并没有什么卵用,因为在平时开发中并用不到,而且这距离还无法准确计算,只给出了ascent和top,可以通过top-ascent(因为top和ascent都是负数,计算是应该是ascent-top)来估算出上边距,而通过bottom-descent来估算出下边距,如果还想要进一步精确,只能通过工具去测量得出了,风险是有些没有考虑到的字体会出现不准确的情况,这就要视具体情况而定了。
工具
了解情况之后,我就开发了一个工具给设计师,让她可以查看不同字体大小出现的上下边距,如图:
如果大家有更好的方法,欢迎交流讨论,留下高见,谢谢!
参考资料
自定义控件其实很简单1/4
Typeface Wiki
FontMetrics
Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics
可以随意转发,也欢迎关注我的简书,我会坚持给大家带来分享。