聊一聊 Sketch 與 iOS 文字的行高

07-11

【文章單位基於的設備尺寸為750x1334，也就是@2x尺寸】*
感謝評論區的 @UMLEARN 指出

UI 設計師用 sketch 輸出的設計稿交付工程師後還原總是會遇到一些問題

尤其以字體與其它元素的間距最容易出問題，主要的原因是 sketch 與 ios 系統中字體的行高不同。最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。

所以要想知道最準確的值，那就要先把程序中字體的行高的值取出來，最簡單的方法當然就是用 xcode 跑幾十種不同尺寸字體，然後截圖量出來行高對了。

下圖是新鮮的 xcode 用單個 Label 拖動的方式，把不同字型大小的中英文字體放到界面中

背景顏色即為程序中字體的行高，也就是 sketch 中的 spacing line 的值。

可以看到 mainStoryboard 中的文本已經跑到左邊的模擬器裡面了，這個時候只需要 com+s 即可保存原汁原味的屏幕截圖。

下面這張圖就是程序上面的原截圖，左邊的橙色區域是我已經測量好的行高值。

上圖並不容易看清楚不同字體不同的行高，所以我也製作了一個表格

具體整理出來的表格在下方

綠色區域為我們在 APP 開發中常用的字型大小22px ~30px

最下方的+4 +6 +8..... 都是總結出來的規律：

如果字體大小在12~20之間，字體行高等於字體大小加4；

if ( 12 <= font size <= 20 ) { line height = font size + 4 };

if ( 22 <= font size <= 30 ) { line height = font size + 6 };

if ( 32 <= font size <= 40 ) { line height = font size + 8 };

.......

實際上上面的 if 語句還是有規律的，所以插件里用到了更好的演算法，程序方面的東西就不在這裡細寫了。

計算機上所有重複的工作都是可以通過程序去解決，所以我們製作了一個sketch插件

youngxkk/AutoFixiOSTextLineHeight?

github.com

插件運行原理是遍歷 sketch 中字體的大小，然後通過上方表格的規律，把不同尺寸的字體填充不同的行高，達到與 ios 開發中字體的行高相同。

這樣用 sketch measure 導出的設計稿給工程師的時候，只要工程師按照設計稿上面字體與其它元素間距的值去寫程序，那麼還原度理論上是100%的。

【只測試過 iOS 系統中蘋方和 SF 字體，其它的自定義字體就隨緣吧。】

【建議多行文本不要使用此插件】會讓排版變的很醜陋，多行文本就單獨與開發聯調吧。

目前支持同時選中多個文本圖層或選中單個 Artboard，然後運行插件

使用快捷鍵效率更高：shift + option + command + i

【GIF】

歡迎反饋