想看更多 Figma 教程、资源请访问 Figma 中文网:https://figmacn.com

欢迎来到 Figma 教程。在这个教学视频中,我们将一起学习文字工具和字体的基本使用。

在设计中文字样式是十分重要的,你选择的字体字号决定了你的设计的可读性和独特吸引力。你所设置的文字颜色、尺寸、间隔、宽度,都会向你的用户传达一些产品信息。

Figma 预先加载了很多谷歌字体,因此你可以直接快速开始设计。你可以前往 font.google.com 去预览你喜欢的字体效果和样式,或者通过筛选去发现一些新字体。

当然,你也可以使用本地字体进行设计。不过如果你是用在线版的,则需要先下载并安装 Figma 字体安装器。你可以在个人设置页面找到下载链接,这样 Figma 就能识别到你本地所有字体了。

如果你用的是本地客户端,就不需要下载字体安装器了,可以直接使用本地字体。如果你在和别人一起协作时使用了本地字体,那么其他人也需要在本地安装了这些字体,这样才能使用那些字体。

还好有谷歌字体,那让我们直接开始吧。我们可以在顶部的工具栏点击文字工具,或者按下 T 来进入文字输入模式。当你处于文字输入模式时,有两种方式来创建文字图层。

你可以在画布中点击并直接输入,这样就创建了一个宽度自适应的文字图层,你的文字图层宽度会随着文字内容而变化。

第二种方式是点击后拖动,这样可以创建一个固定尺寸的文字图层。由于我们指定了尺寸,所以这种方式创建的文字图层是固定大小的。当你输入的文字过长时,它会在到达边界时自动换行。如果文字向下超出了区域,它也不会自动扩大尺寸。

想要编辑已创建的文字图层,双击它就可以了。你可以改变它的自适应行为,比如设置为高度自动,这样再增加文字时它的高度会自动增长,这些操作都可以在文字面板的高级菜单中找到。

我们还可以在文字面板对文字进行其它的一些属性控制。首先我们可以点击这个下拉菜单来切换字体,我们还可以点击这块区域直接输入字体名称。让我们选择 sans 字体,在下边还有两个选项:选择文字字号或者设置文字加粗或斜体样式。

Tips:如果输入的是中文,字体一定要选中文字体才会显示

让我们把字号从 10 改为 8,选中字体框并按两次向下键 ↓,或者按住 Alt 并在字号上拖动鼠标。你还可以使用快捷键来更改文字样式,按下 command+B 可以给文字加粗,按下 command+I 可以让文字变斜体,按下 command+U 可以给文字加下划线。

接下来我们设置行高,来调节每行文字之间的距离。它的默认值是 100%,等于当前字体的默认行高,按住 Shift 同时按方向下(或上)键,我们可以以 10 为基本单位改变行高。

在行高右边是字体间距设置,它改变的是文字之间的空间大小。如果我们要调整某几个字符间距,可以选中它们进行调整。字间距的单位默认是 0%,但我们可以在里面输入 px(像素),让我们把它改为 2 px。

现在我们来看看段落间距和段落缩进。段落间距改变的是段落之间的距离,也就是文字图层中由回车分隔的段落间距,让我们把它设置为 10px。段落缩进是指每段首字母往后缩进,让我们把它改为 5px。

我们还可以调整文字的水平和垂直对齐,来决定文字该如何排列。我们的水平对齐选项包括居右、居中、居左和两边对齐,垂直对齐选项有靠上、居中和靠下对齐。

你还可以使用文字面板以外的属性来调节文字。如果你想调节文字的颜色、描边和效果,可以直接点击右边的填充、描边和效果属性。让我们把这个文字改为红色,并且给它添加一像素的黑色描边。最后,我们点击效果给文字添加阴影。

最最后,让我们再回顾一下:

•前往 font.google.com 去查找或发现字体•如果你使用在线版本请先下载字体安装器来使用本地字体•文字自适应有三个选项:宽度、高度和固定大小•输入数字加 px 来更改行高和字符间距•调整文字的水平或垂直对齐方式

想看更多 Figma 教程、资源请访问 Figma 中文网:https://figmacn.com

查看 Figma 中文网

div固定大小文字溢出自动缩小_Figma 教程 | 文字工具相关推荐

  1. jQuery实现 div里面的文字如何自动缩小,避免文字溢出

    今天用 jQuery实现 div里面的文字如何自动缩小,避免文字溢出的一个例子 代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  2. div固定大小文字溢出自动缩小_CSS样式更改——框模型、定位、浮动、溢出

    前言 上篇文章主要介绍了CSS样式更改篇中的列表.表格和轮廓,这篇文章主要介绍CSS样式更改中框模型.定位.浮动.溢出基础知识. 1.框模型Border Model 从上图可以得知,如果把一个网页比作 ...

  3. div固定大小文字溢出自动缩小_【高并发】高并发环境下如何防止Tomcat内存溢出?看完我懂了!!

    写在前面 随着系统并发量越来越高,Tomcat所占用的内存就会越来越大,如果对Tomcat的内存管理不当,则可能会引发Tomcat内存溢出的问题,那么,如何防止Tomcat内存溢出呢?我们今天就来一起 ...

  4. li 字多出了省略号_文字溢出自动显示省略号css方法 -

    文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...

  5. li 字多出了省略号_文字溢出自动显示省略号css方法

    这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...

  6. div文字溢出自动加省略号(…)

    CSS3属性之五:text-overflow 语法: text-overflow : clip | ellipsis 取值: clip: 不显示省略标记(...),而是简单的裁切. ellipsis: ...

  7. textarea 固定大小,滚动条,限制拖动,文字对齐

    取值:$("#ID").val(); 控制大小:加width,height限制(style="width:100px;height:200px;");或row, ...

  8. 如何让文字溢出自动变成省略号

    在你的p标签或者是什么上面加入这段代码 display:-webkit-inline-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-or ...

  9. Unity根据文字内容自动滚动显示最新文字

    1.在Canvas下创建一个Scroll View. 2.在Scroll View的Content下创建Text. 3.在Content添加组件Vertical Layout Group.Conten ...

最新文章

  1. man-翻译和epoll相关的内容,部分
  2. 患者如何区分股癣和银屑病+药膏根治
  3. 译文 | 与TensorFlow的第一次接触 第四章:单层神经网络
  4. 斐波那契数列的Python实现
  5. Linux2.6信号管理
  6. ubuntu adduser
  7. 数据结构(C语言版 第2版)课后习题答案 严蔚敏 编著
  8. 常用元器件及元器件封装知识
  9. NBNS 数据包 和 NetBIOS 协议
  10. 在线计算机进制换算,进制转换计算器
  11. windows补丁下载说明
  12. 夸奖对方代码写的好_形容夸人的成语有哪些
  13. 计算机课程培养关键能力,大学生计算机应加强自学能力培养
  14. OSChina 周三乱弹 —— 可乐帝国军人们,集结了
  15. Debian搭建Samba服务
  16. 十进制数转换为二进制,八进制,十六进制数的算法(欢迎拍砖)
  17. 计算机语言对传统文化的影响,网络文化对传统文化的冲击
  18. 北京某金融公司(Java开发实习生)面试及答案
  19. 一本建立程序员(其它从业者)世界观、价值观和人生观的书——《黑客与画家》读书笔记
  20. 什么计算机目录服务,AD之:DNS服务器上的SRV记录定位目录服务

热门文章

  1. 身份认证与访问管理护航云安全
  2. unity3D常见问题
  3. 真实世界:使用WCF扩展记录服务调用时间
  4. maven 构建 springmvc + spring security 权限控制示例
  5. SQLServer 系统数据库
  6. 桌面图标变蓝底处理方法
  7. 轻松搞定 Nginx 配置代码的神器!
  8. 老师傅告诉你,学校学的编程知识,和工作所需要的差别有多大!
  9. 飞秋(FeiQ)海量的用户基数决定了这一模式
  10. DirectSound