用 Sketch 做界面時處理字體排版與 Photoshop 有什麼區別？

01-05

比如同樣的字體、克重、粗細，在 Photoshop 中的表現更貼近實際設備中的效果，Sketch 中顯示就明顯的粗重一些（只有在 Convert to Outline 之後才顯示正常），行距同樣的數值兩者相比較也不一樣。
Photoshop 的文字有分「段落文本（Paragragh）」和「點文本（Point）」，用 PS 的時候用點文本感覺很爽，而 Sketch 對應的則是「Fixed」和「Auto」，看上去 Auto 對應的是 PS 里的點文本，但是 Sketch 的文本框上下會留出一些留白間距，而 PS 則是沒有留白間距的處理，這樣一來，對齊的時候 PS 感覺會更精準一些，不知道在 Sketch 中有無比較好的解決方案？

2014/10/31 更新
關於文本行高的問題，Sketch 3.2 進行了一些改進。之前在對一段文本做行高調整時第一行文字的Y軸位置會發生變化，導致排好的位置需要再次調整。新版中行高調整將固定第一行文字的Y軸位置，向下進行行高擴展。

來源：Sketch 3.2 Beta

題目描述提到的 Sketch 文字渲染粗重應該是開啟了 Sub-pixel Antialias，如果為 iOS 做設計的話關閉這選項就好。另外它還有個「bug」（軟體作者不認為是 bug）就是如果某個圖層選擇了其它 Blending 模式（比如 Multiply）整個 artboard 的 Sub-pixel Antialias 都會失效……

另外 Sketch 的行高很有問題，我隨手找過幾個字體對比過，比如在行高設為 88px 時，每個字體的行高都不一樣，行高設為自動時不同字體文本框 padding 也是不同的。排版對齊很麻煩：

Sketch 還有個不太爽的地方是無法方便地為一段中英混合的文字指定中英文字體，比如說「你好 Hello」這幾個字，在 PS 下我可以先設為冬青黑，再設為 Avenir Next，它就是冬青黑的中文+ Avenir Next 的英文。但 Sketch 不支持這樣的操作，為大段文字設置不同的中英文字體就是災難。我能想到 Sketch 文字排版的優點就是它在切換 Alignment 時文本不會發生位移，希望 PS 在這一點向它學習。

Sketch 調用 OS X 的字體渲染引擎進行渲染，所以文字效果與 OS X 的原生效果一致。而 Photoshop 使用的是 Adobe 自己的柵格化引擎。如果是為 OS X 進行設計，Sketch 能得到最準確的效果。

在關閉 Sub-pixel antialiasing 的情況下，Sketch 的文字呈現效果應當與 iOS 較為接近，而與 Android 相對區別較大。但鑒於屏幕 PPI 的提高，字體渲染引擎帶來的文字效果差異已不會特別大，何況 iOS / OS X 的字體渲染策略與 Android 使用的 FreeType 相同。

行高的問題，主要出現在 CJK 字體上，在純西文字體中未見到過。使用西文字體、但因為輸入了字符集外的文字而發生字體回退，亦會產生行高問題。這不能完全算是 Sketch 的錯，因為 Sketch 是直接使用了 OS X 的排版引擎。CJK 字體的 ascender、descender 和 leading 值設置與西文字體不同，所以混排時就可能因此出現行高問題，這與系統的文字處理 API 對行高的處理方法有關，詳見：在 OS X 的 TextEdit.app 中輸入混合的中英文，為什麼會出現行高不同的情況？如何解決？

專制處女座之 Sketch - Ping"s Choice - 知乎專欄我嘗試了下這樣去處理，對 iOS 的設計師應該可以解決這個問題了

3.6版本的 sketch 已經優化了。