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