Sketch手册:文本

文本

Sketch 使用操作系统原生的字体渲染模式,因此字体显示看起来很不错。使用原生字体渲染的好处就是当你进行网页设计时,你可确定设计稿中的字体效果和真实网页中效果一致。Sketch 同时支持文本样式,所以可以让多个文本图层使用共同的字体、大小、和字间距等。

添加文本

你可以从工具栏中选择文本(Text)工具。当光标变成文本输入样式时,在画布中任何区域点击以添加文本图层。你会看见新的文本图层已被选定,直接开始打字吧。

你也可以点击并拖拽鼠标以创造一个固定尺寸的文本框,当文本内容大于文本框时,会自动向下扩展文本框高度。而普通的不固定尺寸的文本框则会增加宽度以适应文本内容。

调整文本大小

当你直接拖拽文本框,文本框内文字本身的大小并不会相应改变,但你可拉动文本框底部的缩放手柄来一起控制文本框和文字大小。

Sketch手册:文本 - US - UI设计素材库

本章节包含...

文本检查器

当选中一段文本,你会发现属性检查器随之变成了编辑文本所需的属性。

在基本的图层属性下面是共享样式区域。

紧接着是选择字体和字重,点击齿轮按钮(Options),可选择一些列表样式和文字修饰样式,比如下划线和删除线。再往下区域可选择字间距、分别可以调整字间距(Kerning)、行间距和段落间距(段间距以是否输入回车来区分)。

Sketch手册:文本 - US - UI设计素材库

文本颜色

编辑文本时,你可以通过字号和齿轮中间的颜色按钮为文本设置单独的颜色。

你也可为文本图层应用一个通用的填充式样,例如渐变,但任何填充都将针对整个文本图层,这将覆盖之前对文本的颜色设置。

值得注意的是,要在文本上渲染渐变效果,必须先将文本转化为矢量图形。

自动和固定大小文本框

文本框的宽度属性(位于对齐选项的下面)可设置为自动或固定。自动大小文本框意味着它会自动扩展以容纳你输入的一切文本。固定大小文本框则会在你输入更多内容时保持现有宽度不变,而增加文本框的高度。

Sketch手册:文本 - US - UI设计素材库

行高

Sketch 在调整行高时,总会保持一致的基线对齐方式。如果修改了字体或字号,这个文本图层会改变自身的位置,但是基线的位置是不会变动的。

只要文本图层有固定行高,一致的基线位置边缘同样会保持一致,不管你是否更换字体。这种方式会产生良好的排版效果。当不设定固定的行高时,Sketch 会使用字体默认的行高。

Sketch手册:文本 - US - UI设计素材库

当创建一个新的文本图层时,它会使用自动行高而非之前设置的数值。文本图层的自动行高和设定相同数值的自动行高是有区别的,属性检查器中默认使用自动行高数值作为占位。

共享样式

你会经常想将多个文本设置为同一样式,共享样式能实现这一点,它们会将你分散在不同图层中的文本都保持同步。

值得注意的是,文本样式只能在单独的文档中共享,同个文档中的不同页面不同画板都能够共用。

创建样式

想要创建新的文本样式,你需要先选中一个文本框,然后执行菜单命令 图层(Layer)> 创建共享样式(Create Shared Style),此时你会发现属性检查器立即显示出了当前图层的文本样式,你也可以在这里给样式重命名。

Sketch手册:文本 - US - UI设计素材库

如果文本属性发生任何改变,都会自动与其它使用同一样式的文本保持同步。

新的文本图层

你可和通常一样的添加方式添加第二个文本图层,然后在属性检查器中给这个文本使用之前创建好的样式。另一个直接添加特定样式文本图层的方法是,执行菜单命令(Insert)> 样式文本(Styled Text),然后选择你想要的样式,接下来的步骤和添加普通的文本图层一样的了。

Sketch手册:文本 - US - UI设计素材库

值得注意的是:在 Sketch 2 中就已经有了文本共享样式的功能,在 Sketch 3 中又进一步升级了。最大的变化就是,现在渐变填充、阴影和内阴影都能包含在文本样式当中了。

文本路径

Sketch 支持文本渲染路径,例如下面的例子:

只需两块内容来实现这个效果:一个矢量图形和一个文本图层。执行菜单命令文本(Type)> 文本路径(Text on Path),Sketch 就会将文本图层贴合的放在它下一层的矢量图形上面。值得注意的是,两者的顺序必须是矢量图形在文本图层的下面,才可得到这样的效果。

Sketch手册:文本 - US - UI设计素材库

放置文本图层时你只需将文本横向拖至矢量图形,这点很难用文字表述,但你可以在创作中非常直观的看到它们如何实现。

转化为轮廓

文本可以被转换成矢量图形,执行菜单命令文本(Type)> 转换为轮廓(Covert Text to Outlines)来实现。这会将文本中的每个字母都转成图形,你可向编辑任何其它图形一样单独编辑每一个路径和节点。

警告

但是,请额外留心这个操作。不要将很长一段文字都转化为矢量图形,这会大大降低文档的运行速度。

将一小段文字转化为大量包含布尔运算的子路径是非常消耗系统内存的,如果不得不转换一段文字,那么你可以先将一段文字尽可能分成多个短文本,再转化为矢量图形。

不过现在可直接在文本上运用渐变等效果,大多数时候都不需要将文本转化为轮廓。

350