前端時(shí)間驗(yàn)收開(kāi)發(fā)大哥的頁(yè)面時(shí)，發(fā)現(xiàn)文字部分實(shí)現(xiàn)出來(lái)有很大的出入，所以和開(kāi)發(fā)商量，騰出半天時(shí)間一起調(diào)試了文字的各種效果，最后基本能做到98%的還原度，下面來(lái)分享一下。
1.文字中幾個(gè)基本概念
首先我們要了解文字的一些基本概念。其實(shí)我們?cè)谠O(shè)計(jì)軟件中創(chuàng)建出來(lái)的文字高度，不僅僅是包括文字本身的高度（字高），還包括文字上下空出的部分，字高加上下空出的部分之和就是行高；另外每個(gè)文字擁有自己的基線，也就是圖中的紅色線，基線與基線之間的距離也是行高。
2.偏差產(chǎn)生的原因
1）標(biāo)注時(shí)忽略了行高，只標(biāo)注了文字與文字之間的距離。eg：如圖就有了將近10px的差距
2）注意了行高的存在，但設(shè)計(jì)與開(kāi)發(fā)時(shí)的默認(rèn)行高不同。
我們使用sktech創(chuàng)建文字時(shí)，會(huì)有一個(gè)默認(rèn)行高；開(kāi)發(fā)時(shí)程序員創(chuàng)建的文字也有一個(gè)默認(rèn)行高，這兩個(gè)默認(rèn)行高間可能會(huì)有不同。eg：圖中不同的行高之間就有了20px的差距。
3.如何能夠和開(kāi)發(fā)溝通還原設(shè)計(jì)稿
那了解了以上文字的內(nèi)容之后，我們現(xiàn)在知道，只要我們標(biāo)注清楚字號(hào)大小和行高，且標(biāo)注時(shí)不忽略行高，那么我們的設(shè)計(jì)效果就基本可以精準(zhǔn)還原了。
但是如果我們每一段文字都要標(biāo)注行高的話其實(shí)是很費(fèi)時(shí)費(fèi)力，很多情況下我們都是使用默認(rèn)的行高，那這個(gè)時(shí)候我們就要和開(kāi)發(fā)統(tǒng)一一個(gè)默認(rèn)的行高，以下是我從網(wǎng)上找到的ios與安卓默認(rèn)的開(kāi)發(fā)行高。
可以看到ios的默認(rèn)行高其實(shí)是有一定規(guī)律可以尋找的，但是安卓不同，基本沒(méi)有規(guī)律可循，所以我用到了一個(gè)自動(dòng)修復(fù)行高的插件（ios其實(shí)也有插件，但我基本都記住了）
安卓修復(fù)行高插件：https://github.com/zz379/AutoFixAndroidTextLineHeight
iOS修復(fù)行高插件：https://github.com/youngxkk/AutoFixiOSTextLineHeight
感謝開(kāi)發(fā)工程師的插件貢獻(xiàn)，鞠躬???♀?
在用插件修復(fù)行高以后，我們就和開(kāi)發(fā)人員有了統(tǒng)一的默認(rèn)行高，所以默認(rèn)行高的地方我們就不需要進(jìn)行標(biāo)注，只要對(duì)特殊行高的位置進(jìn)行標(biāo)注即可。
4.一個(gè)實(shí)例
下圖是一個(gè)標(biāo)注的例子，紅色線和綠色底框在實(shí)際標(biāo)注時(shí)是不存在的，這里為了方便理解所以添加。標(biāo)注的距離為行與行之間，默認(rèn)行高時(shí)沒(méi)有特殊標(biāo)注，段落部分特殊行高時(shí)標(biāo)注清楚了特殊行高。
以上內(nèi)容均經(jīng)過(guò)我和開(kāi)發(fā)人員的共同驗(yàn)證，基本能夠完美實(shí)現(xiàn)設(shè)計(jì)效果，所以寫(xiě)出來(lái)分享一下，希望對(duì)正在頭痛開(kāi)發(fā)效果不能還原的設(shè)計(jì)師有所幫助～
那我們下次再見(jiàn)啦??
