在實際開發過程中，字體上遇到的問題是最多，也是最難以解決的。不知道小伙伴在驗收的時候會不會遇到這樣的情況，開發明明是按照設計圖上的字體和間距來的，可跟設計稿的間距還是有差異，這是為什么呢？今天和大家分享一下，文字怎么搭建和使用，如何正確的設置文字做出正確的設計，且符合項目開發的實際需要。

一、排版屬性

1. 行高

行高是一行文本垂直方向的高度，這個高度和字高無關，文字內容默認處于這個高度的水平居中位置，如下圖所示。

在一般的UI軟件中，我們可以發現通常默認行高一定比字號本身更大，例如字號為 12dp的文字行高為17dp，導致文本區域高度大于實際的字高。這是一個正常現象，因為如果行高和文字同高或更小，那么在多行文本狀態下就無法正常顯示。

2. 行間距

在 Sketch、XD 等軟件中沒有包含的屬性需要引起我們重視，那就是“行間距”。

行間距是一個獨立于行高之外的屬性，在一些復雜的設計、排版軟件中會出現，以及iOS、Android 等前端語言中也有提供這個屬性，它是造成我們標注與實際開發過程出錯的罪魁禍首。

無論是設計過程中，或者設計標注文件中，都要拋棄掉任何有關行間距的概念，雖然 iOS 使用行間距可以實現，但是實現的效果和設計稿是有出入的。因為設計稿中我們只能使用行高，所以在一個文本區域中，它的上下兩側都有行高增加的空白區域，但是實現過程里面沒有這一截間距，導致實際文本區域和上方元素的距離效果有偏差。

3. 其他

除了行高、行間距，還有段間距、對齊方式、字間距等排版樣式，但對開發的影響不大，設計的小伙伴應該都懂，所以這里不過多講解。

二、文字行高適配

目前文字行高間距的標注方法有3種。

1. 自己手動標注行高

有部分設計設計師用原始方法來標注文字，即用文字最低點和最高點作為行高就行標注，如下圖，標注從下面文字“麗麗”的開始測量到下面灰色文字的最高點“阿卓”結束。在這種情況下，開發人員還原出來的效果和設計稿有一定的差距，需要調試很多遍才能達到想要的效果。

（錯誤的方式）

2. 使用sketch默認的行高

使用sketch默認的行高進行標注，這是UI設計師常見的操作習慣，但在驗收開發版本還原度的時候，還是發現與設計稿標注的間距不一樣。

（錯誤的方式）

這是為什么呢？因為不同的字形在高度上都會產生微小的差異，無論是使用原始方法或是使用sketch默認行高去標注文字，它都與前端在編輯文字的軟件里的字體默認行高不一致。

3. 手動修改sketch行高為開發環境下的默認行高

手動修改文字行高，把sketch文字行高與前端默認行高修改成一致，從而給出準確的文字間距。這種方式雖會花費不少時間，但也最精確，你可以據此設置出最美觀合理的間距，而不用擔心上線稿的還原度問題。

下圖是iOS的Xcode以及Android文字編輯器對應下默認的行高。

最便捷的方法：手動調整sketch里的字體的默認行高并形成樣式。這樣規范好設計能更好的讓開發人員還原設計稿，也便于我們后期的頁面校對和調整。

這時眼尖的朋友可能會發現，Android和iOS開發的文字編輯器默認的行高也不一樣啊，難道我們要出2套設計標注文件嗎？雖然不可否認的是，最理想狀態當然是設計師出2套設計稿，但在職場打滾過的設計師都會知道，多數產品都是處于快速迭代的過程，出2套設計稿花費的時間成本過高，并不符合實際情況。

對于這點，比較建議大家可以嘗試把ios和安卓都設置成一樣的行高，針對特殊頁面再單獨做標注調整。

總而言之，具體使用哪種方法去做文字的標注，要根據自己的項目具體情況具體分析。

總結

由于開發環境下文字上下是有padding高度的，設計師需要手動修改sketch行高為開發環境下的默認行高。

以上就是個人的小小的經驗，希望可以給大家一些啟發和借鑒～

轉載聲明：本文來源于網絡，不作任何商業用途