每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票避免与前端工程师互殴指南(一)
01#背景与问题
在项目视觉走查的时候总会发现一些小问题,比如昵称和简介之间的间距与设计稿不一致
比如标签文案没有在容器里上下居中
排除前端没有按照设计标注上的数值进行设置外,主要原因是 Sketch 里字体默认行高与开发系统中的行高不一致导致的
02#字号与行高
Ant Design 里形容行高:行高可以理解为一个包裹在字体外面的一个无形的盒子
例如 iOS 项目中同是16px(全文用一倍图尺寸)的字号,在 Sketch 里默认高度是22px,但在开发环境里却是20px
iOS 开发系统与 Sketch 默认行高对照表
可以发现 iOS 开发系统中苹方字号范围10pt ~ 20pt行高+4px,21pt ~ 30pt行高+6px
03#解决方案
Sketch 有一款插件 Auto Fix iOS Text Line Height,完美修复字体行高问题,仅针对苹方
https://oursketch.com/plugin/auto-fix-ios-text-line-height
https://oursketch.com/plugin/auto-fix-android-text-line-height
04#关于网页中line-height属性
网页的行高属性是可以进行设置的,如:
normal:大约是字体的1.2倍,但对不同的浏览器或字体都会有不同的效果,如字号16px*1.2=19.2px行高
number:一个数值,如是1的话,字号16px*1=16px
行高%:百分比数值,如120%,字号16px*120%=19.2px行高
length:固定值,如16px,字号16px=16px行高,字号20px=16px行高
个人在项目中用的比较多还是1.5倍,字号12pt/14pt+6px,16pt/18pt/+8px等等,当然这并不是一个标准,怎么设置还是要根据项目具体业务与前端配合调整
公众号:柠檬设计笔记
Powered by Froala Editor
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论