您的位置:首页 > 其它

设计师测量文本行距

2016-06-23 11:30 197 查看
转载请注明出处,谢谢!http://blog.csdn.net/fwt336/article/details/51741862

由于设计师在标注段落行距时,测量出来的行距不标准,或者说不精确,为什么呢?因为他们只能顶着上下两行文字进行行距的测量,所以量出来就不准了。你又或许会说,那就让他上下空出几个像素来测量不就准确了吗?但是,具体又该空出多少像素呢?老板的要求是“最多1个像素的误差,或者根本就不能有误差”,我要撞死了去!所以就只能自己写demo来研究研究了。

当我们在学习java语言时,有学习过使用canvas来绘制text的经验,所以先来讲讲text字符的绘制方式。

让我们来看看字符在绘制到画布上时的位置:



top:浅灰色
ascent:绿色
descent:黄色
bottom:瑰红
 
这4条线到底是什么?
top :The maximum distance above the baseline for the tallest glyph in the font
at a given text size.
ascent :The recommended distance above the baseline for singled spaced text.
descent :The recommended distance below the baseline for singled spaced text.
bottom :The maximum distance below the baseline for the lowest glyph in the
font at a given text size.

其实看完我也不知道是啥意思,但是绘制字符的这些基础线是都有的。

ascent - top 的高度就是我们需要的顶部的间距;

bottom - baseline 就是我们需要的底部的间距;

由于这两个间距的存在,直接导致了我们的设计师在标注行距的时候容易导致标注不精准的问题。

在来个图:



那么具体这个ascent和descent值的变化有什么规律呢?

只能自己写demo了。

demo在此

上结果:



最后采用的方法是,设置好几个段落的间距值,让设计师来选择哪种间距即可。

上图:



另外,附上ios行距测量办法:http://www.jianshu.com/p/50b3d434cbc0

如有更好的办法,欢迎留言。谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: