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

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