UI设计师如何正确给前端标注行高？

Question

我司UI给的标注都是贴着文字上下的，这就造成了写行高和边距的时候只能计算一下才得到。尤其第二张图这种标注写css的时候真的很烦躁，有什么工具或方法来帮我司UI实现正确的行高标注？

Answer 1

我是这样处理的

font-size:14px;
line-height:14px

Answer 2

首先，行高不能设为1，因为设为1之后，有可能中文会被截取，显示不完整。
bootstrap为了统一浏览器之间的行高差别，设置的是1.47....，但是，实际中，这个值并不好计算，建议line-height:1.5，这样便与计算，差别也不会很大。
比如，设计稿的上边距是20px，字体大小为12px，那么我们代码的实现就应该是font-size:12px;margin-top:17px;
为什么是17px呢，因为行高为1.5，所以超出了0.5*12为6px，上边超出了6/2=3px，20-3=17px;

熟练之后直接边距 - 字体大小/4就行了

Answer 3

是设计师的问题，zeplin还是Sketch都没关系，只是自动标注工具，如果你的设计师在制作设计稿的时候就没考虑行高概念的话，用什么自动标注工具都是一样的。
主要跟设计师沟通，如果你的设计师只是标注像素到像素的尺寸，那么他只能称为平面设计师，UI设计师绝对要考虑行的问题。

Answer 4

line-height:1;

不用单位就表示 1em

多行的话

line-height:1.5;
margin:-0.25em 0;

用 margin 把上下多的行高去掉

Answer 5

可以量取文字的高度，然后把文字的行高确定。如果是按钮，可以吧12减去按钮的padding和border宽度

Answer 6

问题是「各位有什么方法解决或者你们UI有什么工具活方法来实现正确的行高标注？」
答案是 zeplin 这个工具，设计师在 PS 或者 sketch 上安装插件，开发就可以看到几乎所有元素的所有 css 属性：

如果有帮到你请 upvote 或采纳～