用 Sketch 做界面时处理字体排版与 Photoshop 有什么区别?

比如同样的字体、克重、粗细,在 Photoshop 中的表现更贴近实际设备中的效果,Sketch 中显示就明显的粗重一些( 只有在 Convert to Outline 之后才显示正常),行距同样的数值两者相比较也不一样。 Photoshop 的文字有分「段落文本(Paragragh)」和「点文本(Point)」,用 PS 的时候用 点文本 感觉很爽,而 Sketch 对应的则是「Fixed」和「Auto」,看上去 Auto 对应的是 PS 里的 点文本,但是 Sketch 的文本框上下会留出一些留…
关注者
275
被浏览
10723

3 个回答

题目描述提到的 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 中输入混合的中英文,为什么会出现行高不同的情况?如何解决?