写文字的CSS样式时，行高无法保持与设计稿一致的效果怎么破？

Question

设计稿中，字体行高与浏览器表现不一致怎么办？

首先试了Photoshop CC 2018

例子：字体微软雅黑常规

font-size:16px;
line-height:24px;

从图中看出，PS和chrome浏览器中多行字体之间的间距是没问题的

---

然后麻烦的来了：

在文字上下加上一个div元素，与字体的间距设为30px

、

可以看到，chrome浏览器中因为字体line-height为24px，且有两行文字，所以其高度就是48px

但是Photoshop中，因为文字是贴着边开始计算的，其高度根本不是行高,所以造成了上图与浏览器的差距

就算人工手动给PS的文字加一个48px高度的矩形，因为每个字体的基线都不一样，也无法得到与浏览器一致的效果

---

然后我又试了新出的Adobe XD

Adobe XD 这玩意比PS对了一圈文本框，但是这个框。。。还是个坑爹玩意，完全达不到浏览器一致的效果，不愧是Adobe家族的。

现在写CSS样式时，单独文字这部分，完全做不到和设计稿保持一致的视觉效果，强迫症快被逼疯了。

Answer 1

https://segmentfault.com/q/10...

Answer 2

（1）在重置css文件里统一给你想要的标签设置line-height: 1!important;但是设置的对象不能是内联标签,否则无效;
（2）如果想让内联标签也实现这效果的话,可以用display:block;或者display:inline-block;
（3）当然你也可以块级标签内放内联标签，例如：

<div>

<span>订单编号</span>
<span>服务中</span>

</div>
给父级div设置即可。
（4）想要了解的更加详细，https://segmentfault.com/a/11...