鍍金池/ 問答/UI  網(wǎng)絡(luò)安全  HTML/ 寫文字的CSS樣式時，行高無法保持與設(shè)計稿一致的效果怎么破？

寫文字的CSS樣式時，行高無法保持與設(shè)計稿一致的效果怎么破？

設(shè)計稿中，字體行高與瀏覽器表現(xiàn)不一致怎么辦？

首先試了Photoshop CC 2018

例子：字體微軟雅黑常規(guī)
font-size:16px;
line-height:24px;

clipboard.png

從圖中看出，PS和chrome瀏覽器中多行字體之間的間距是沒問題的

然后麻煩的來了：

在文字上下加上一個div元素，與字體的間距設(shè)為30px

clipboard.png
、

可以看到，chrome瀏覽器中因為字體line-height為24px，且有兩行文字，所以其高度就是48px

但是Photoshop中，因為文字是貼著邊開始計算的，其高度根本不是行高,所以造成了上圖與瀏覽器的差距

就算人工手動給PS的文字加一個48px高度的矩形，因為每個字體的基線都不一樣，也無法得到與瀏覽器一致的效果

然后我又試了新出的Adobe XD

圖片描述

圖片描述

Adobe XD 這玩意比PS對了一圈文本框，但是這個框。。。還是個坑爹玩意，完全達不到瀏覽器一致的效果，不愧是Adobe家族的。

現(xiàn)在寫CSS樣式時，單獨文字這部分，完全做不到和設(shè)計稿保持一致的視覺效果，強迫癥快被逼瘋了。

回答
編輯回答
編輯回答
小眼睛

（1）在重置css文件里統(tǒng)一給你想要的標(biāo)簽設(shè)置line-height: 1!important;但是設(shè)置的對象不能是內(nèi)聯(lián)標(biāo)簽,否則無效;
（2）如果想讓內(nèi)聯(lián)標(biāo)簽也實現(xiàn)這效果的話,可以用display:block;或者display:inline-block;
（3）當(dāng)然你也可以塊級標(biāo)簽內(nèi)放內(nèi)聯(lián)標(biāo)簽，例如：

<div>

<span>訂單編號</span>
<span>服務(wù)中</span>

</div>
給父級div設(shè)置即可。
（4）想要了解的更加詳細，https://segmentfault.com/a/11...

2018年4月15日 20:25