文本,就像 颜色 一样,表面上看起来很简单,但一旦你深入研究,就会发现它绝非如此。多年来,我们已经了解到,设计师对类型系统的期望并不总是与 Apple 和其他供应商构建其文本布局系统的方式相符。
Sketch 处理文本的方式是我们一直希望改进的方面,但随着你继续阅读,你很快就会发现,进行这些更改和改进需要我们深入研究 Apple 的文本渲染系统并进行一些底层更改。我们认为最终我们取得了胜利,我们希望你喜欢最终的结果。
为了了解我们需要解决的一些问题,让我们首先看一下 Sketch 中文本层的垂直指标

单行文本层的高度由字体对于文本大小的行高值决定。此值不对应于文本大小,并且在不同的字体之间变化很大;有时它几乎与文本大小相同,有时它的大小是文本大小的两倍。字体在该空间中的绘制位置由基线(红色)决定,该基线也是由字体指定的。
由于两者在不同的字体之间变化如此之大,因此当你在字体之间切换时,Sketch 中的文本层可能会发生很大的变化,尤其是在同一段落中混合使用多种字体和大小时。这种现象的另一个不良影响是,当你在字体之间切换时,画布上的文本经常会上下移动。
我们支持邮箱中经常出现的一个问题——询问为什么 Sketch 会渲染看似空白的区域(蓝色突出显示),并且不将边界框修剪到图层中升部和降部的边缘。这些也是由字体的度量决定的,但简单地说,某些字符需要这个空间,特别是那些包含变音符号的字符。可能出现在大写字母 *S*(Š,在捷克语和其他斯拉夫语中找到)上的变音符号和带尾音符号的小写字母 *c*(ç,在土耳其语和法语中最常见)是众多示例中的两个。
在 Sketch 3.6 中,我们对文本层排版方式进行了一些更改,特别是对于具有固定行高的段落。为了了解它的工作原理以及发生了什么变化,我们需要看一下 Apple 的文本系统,它如何布局我们的文本行,以及所有这些如何应用于 Sketch。
字符和字形
布局一段文本的第一步是将文本的字符和字体属性转换为字形。字形是特定字体的一个或多个字符的视觉表示。字符和字形之间的映射不是 1:1 的。例如,单个字形可以表示多个字符——这些称为连字。相同字符以不同的顺序排列可能会产生不同的连字,因此字形的数量也不同。我们遇到的最极端的连字是 Zapfino 字体中的“*Zapfino*”。七个字符由单个字形表示

文本容器和行片段
我们可以在一行中容纳多少个字形由文本容器的宽度决定。在 Sketch 中,文本容器的大小由文本层的宽度决定。为了用字形填充文本容器,我们需要将其分成几行。包含适合单行上所有字形的矩形称为“行片段矩形”。只要你在段落中使用单一字体或大小,一切都看起来像预期的那样

在正常的排版中,行片段的高度由该行中最高的字体决定(准确地说;字体上升部分在基线上方和下降部分在基线下方之和)。混合字体可能会产生不同高度的行片段,这就是事情开始变得有趣的地方

固定行高
段落还可以指定最小和/或最大行高。这限制了行片段矩形的高度。如果我们对最小值和最大值使用相同的值,我们将获得固定行高。从历史上看,这正是 Sketch 中设置行高所做的事情。它适用于相同字体的段落。

具有混合字体的段落在 Sketch 中通常看起来不太正确。我们设置了固定行高,那么哪里出了问题呢?答案是找出排版程序选择将基线放置在行片段矩形内的位置。
事实证明,对于每个行片段,Cocoa 的排版程序都会找到该行中最高的降部,并使用它作为基线相对于行片段矩形底部的偏移量。对于混合字体,这为我们提供了固定行高,但基线间距不一致。

当设计师谈到将行高设置为例如 20pt 时,他们的意思是他们希望基线之间有 20pt,而不是 20pt 高度的行片段矩形。这是有道理的,因为决定文本视觉垂直节奏的是基线,它比这些抽象矩形更“可见”。那么我们如何解决这个问题呢?
一致的基线

在 Sketch 3.6 中,我们推出了一个新的排版程序,该程序为具有固定行高的段落生成一致的基线偏移量。为了使它起作用,我们查看段落中的所有行片段,并选择适合所有片段的基线偏移量。
一致的基线偏移量在段落之间也保持一致,即使字体不同,只要它们具有固定行高。如果没有设置固定行高,我们使用字体指示的行高,正如我们所见,这可能会让我们得到不同的结果。当你将其设置为固定时,你将获得美观、可预测的垂直节奏

这如何适用于现有文档?默认情况下,新的文本层使用一致的基线排版程序,而在 Sketch 的早期版本中创建的文本层可以通过更改行高来采用新的排版行为。
其他改进
我们对行高的改进也对行高低于其字体大小的段落的编辑产生了积极影响,因为基线始终在行片段矩形内。它还改进了文本层的边界矩形。
最后,在更改文本层的字体时,我们已经尽力保留第一个基线的位置,因此你的文本层在字体之间切换时将不再垂直跳动。
最后一点
你可能已经注意到,数字排版是一个极其复杂的问题。我们生活在一个激动人心的时代,我们已经意识到,几乎不可能让设计在每台设备和平台上看起来完全相同。
对于我们来说,创建与 iOS、Android 或 Windows 中的 Chrome 或 Mac 中的 Safari 完全相同地渲染类型的系统也是不可能的。它们之间的渲染差异非常复杂且多样。
我们已经听取了你的反馈,并试图创建一个非常一致且可靠的渲染系统。我们在这次更新中重点关注行间距,但我们才刚刚开始。这是我们计划今年发布的一系列类型改进中的第一部分。