美文网首页Sketch
Sketch文本与文本样式

Sketch文本与文本样式

作者: 追光柚子 | 来源:发表于2020-07-08 14:42 被阅读0次

文本属性设置

快捷键T,插入文字,可以在右侧的属性栏对其进行基本的参数调整。

文本设置

1、对字体、字号、字重、颜色的设置;

2、对字间距、行间距、段落间距的设置;

3、字符的对齐方式、字符框的大小设置;

4、字符的修饰、字符大小写的变换;

如果属性栏的字体名称显示不完整,也可以在顶部工具栏中加入【字体】图标,打开字体选项卡从中选择。

字体

文本转路径

如果想对文本做些艺术化处理,需要先将文本转化为路径,操作如下:

文本

从菜单中选择图层-轮廓化:

轮廓化

文本转换成了路径。

已转换路径

此时,我们可以对文字路径进行随意改变。

瞎改的有点丑

文本附着于路径

下图是一段文字和一个曲线路径

文字和路径

如何让文字沿路径显示呢?

选中文字,从菜单选择字符-路径文字,确保图层中文字在路径的上层才可生效。

路径文字

然后将文字拖动到曲线路径上看看效果:

文字附着在了曲线上

文本样式

在sketch中会经常用到文本,而这些文本用在同类的位置设置统一的规范,才能确保整个系统的一致性。

比如APP中的标题、正文、标注等文字都应有规范的文本样式。

置入文本,在右侧属性面板找到【字符】,根据标题的规范,为它设置对应的参数。

设置标题参数

以上标题的文本参数设置好了,那如果在另一个地方需要再次用到标题,难道我们又要重复设置这些参数吗?答案当然是:不

此时,我们只需要选中文本,然后在属性面板找到【外观】,点击创建输入文本样式的名称,即可在样式列表增加一个文本样式。以后我们再置入文字时,就可以选择这些文本样式快速设置文本样式了。

创建文本样式

同样,我们可以再创建些正文和标注的文本样式进入列表。

文本样式列表

如何重命名和删除这些文本样式呢,在左侧的图层栏,组件列表下,点击文本,就可以看到所有文本样式了,选中某一个点击右键即可完成所需操作。

重命名/删除

下图有两处文章,我们想把标注的字体颜色改成浅蓝,那么我们先把其中一组的标注改好。

更改样式

然后点击右侧属性面板,外观那里的更新图标,则有相同样式的文本都会被一并修改。

更新样式

相关文章

  • Sketch文本与文本样式

    文本属性设置 快捷键T,插入文字,可以在右侧的属性栏对其进行基本的参数调整。 1、对字体、字号、字重、颜色的设置;...

  • CSS(四)文本样式设置

    颜色表及HTML代码(部分) 文本样式 文本样式:对齐方式、文本修饰文本转换、文本缩进.... 作用:美化、修饰页...

  • Flutter组件

    文本及样式 Text: 显示简单样式文本TextStyle: 指定文本显示的样式TextSpan: 对一个Text...

  • Sketch: 粘贴没有样式的文本及设置相对行高

    一般,我们将文本粘贴到 Sketch 时,文本会保持本来的样式。举个例子,当你复制一句字体大小为18px且红色的文...

  • Css样式--文本样式详解

    Css样式--文本样式详解 文本样式包括所谓的文本缩进:text-indent水平对齐:text-align:ce...

  • 文本标签and文本样式

    改变字体样式:font-family:字体名称 字体分类: 字体类型: 背景颜色: 文本样式: 文本标签 列表:有...

  • Flutter之常用组件

    基础组件 文本组件 Text 用于显示简单样式文本,包含一些控制样式属性 按钮与手势组件 IconButton I...

  • CSS-基础

    选择器样式:背景/大小样式:文本/字体 选择器 样式:背景/大小 样式:文本/字体 样式:边框 样式:内边距 样式...

  • Flutter 之Text、TextSpan

    Text组件常用属性 属性描述data必填项 文本信息style文本的样式信息strutStyle文本字体的样式信...

  • HTML03-day

    文本标签 列表 颜色单位 字体分类 字体样式 行间距 颜色单位 字体其他样式 文本样式

网友评论

    本文标题:Sketch文本与文本样式

    本文链接:https://www.haomeiwen.com/subject/irxccktx.html