[自译]理解Sketch文字渲染细节

最近也是在工作中遇到很多文字渲染的坑...因为在Sketch中的渲染方式与IDE中的不同，会采用默认的线高，这样会比Sketch里面调整过的精确高度来的松散...想要找到一个很好的解决方法，这篇文章算是解读了Sketch的文本渲染方式吧，还是有一定的探索价值，嗯，可以去原文看看

原文链接：Get Down to the Nitty-Gritty of Text Rendering in Sketch

原文作者：Yakim

你是否曾经在Sketch中使用过文本层，但是不知道具体是怎么回事呢？这种困惑让我决定做一些研究，去弄清楚Sketch是如何渲染文本层的。

文本渲染是一个复杂的事情，特别是与很多其他的图层在一起的时候。这篇文章，我会和你分享我理解的Sketch文本渲染。

边界框代表什么？

你在Sketch中见过，灰色的线框盒子在画布中包围了文本层。它也可以被手柄调整大小。但这个尺寸是是如何确定的呢？为什么不会吸附到文字的具体像素边界上呢？字母周围的空白区域是什么？

线框的实际大小是基于你所使用的字体，每种字体都会有内置的全局字体度量，Sketch会使用字体的这些指标来确定画布上文本层的线框：

Cap Height：大写字母的高度

x-Height：小写字母的高度（特别是小写的x）

Ascender：字母的顶部会溢出多少（例如b k,l,ß）

Descender：字母底部会溢出多少（例如p, j, y, q）

这些标准都是在Adobe Font Metrics文件格式规范中定义的，大多数现代字体都遵循这套规范。

这些度量加起来，就是我们常说的em，你可能会知道这些盒子，它们就像是活字印刷，一种排版技术，在金属块上雕刻字符，然后把字符拼在一起，就形成了一个句子，在纸上拓印出来。

Sketch会根据图层的线高来输出文本的高度，线高就是基于上面的指标。

Sketch如何处理文本的副像素？

现在你可以理解文本层是如何被Sketch渲染的了，但是如果文本层有副像素出现呢？为了不让文字看起来模糊，Sketch会将文字的基线贴近到最近的y位置。看起来会整洁。

而且线高出现了小数的时候也是这样处理。

间距

文本层的y值是Sketch中可以调整的元素之一。字体爱好者也可以根据文本框中的内容进行更多的调整。

字符间距

通过字符间距，你可以调整单个字母之间的水平间距。字符间距也是以像素为单位衡量的，默认情况下，Sketch使用0.1px作为增量，你也可以按住shift，调整增加1px的增量。

但是在使用字符间距的时候会有一个警告：它禁用了字距。字距是嵌入在字体文件中的信息，用于指定特定字母子和的字符间距信息。这基本上是字体设计师才会做的调整，创建字符之间的理想距离，使字符之间看起来有相同的视觉空间。

即使你将字符间距设置为0，也仍然会禁用字距。

启用字距调整，需要删除移除输入的数字并提交空的的输入内容。这会将输入的值设置为auto，确保使用的是字体设计的字距。避免出现一些糟糕的排版。

另外需要注意的是，当你使用0而不是auto的时候，从Sketch中复制CSS时会变得混乱，因为它增加了一行字距为0。在CSS中的问题会和Sketch中不一样，因为它可能会和已经设置了的字母间距冲突。

另一个需要注意的是，当你使用大的字符间距时ligature不会遵守。ligature是一个字符，当两个字符在之后输入，替换的字符会修复间距问题。常见的ligature方式是fi，因为f与i相接近，如果你改变了默认字符间距，最好禁用ligature。

你可以在Sketch中禁用ligatures：

1.前往View -> Show Fonts

2.在Fonts窗口点击Typography

3.进入Ligatures然后取消选项

行间距

你不仅可以设置每个字符的间距，行距也可以设置。在Sketch中，你可以使用字体默认的行间距，或者自定义像素值。新创建的文本层是字体设置的默认行高。修改后会使用这新的行高，需要删除行间距并输入数值。这可以自定义任何的行间距，并且会用浅灰色显示默认的行高值。

如果调整行高，第一行的基线还会保持在默认的y上。

段落间距

Sketch中断行有两种形式：段落断行和换行断行。alt + return会是新建一个段落。shift + return会是会是创建一个换行断行。

段落间距中增加的像素会添加在新的段落之间。

如果你正在制作一个列表项，这一点会很有用。

结语

与版式上的其他因素一样：小的改变不会有很大的影响，但是当你把所有的小改变积累在一起，就会产生很大的影响，虽然大多数人不太能意识到版式的存在，但是它会带来一种感觉。