Figma 的字体模块是属性面板内设置属性最多的一个模块,而它的设置和传统的办公软件 Word、WPS 等有很大的不同。

UI 设计软件为了确保设计稿能落地,会等同前端编程中的字体设置属性来创建对应的设置。所以了解这些设置,就需要理解字体的相关知识点,可以查看我们分享的UI 字体认识:
我们从上到下简单介绍字体模块内的属性:

- 字体:用于选择本地或 Figma 提供的字体
- 字重:选择字体包含的不同字重,调节笔画粗细
- 字号:控制字体图形的大小
- 行高:单行文本的占用高度
- 字间距:字符左右的间距设置
- 水平方式:在文本区域内水平方向的左、中、右对齐
- 垂直对齐:在文本区域内垂直方向的左、中、右对齐
在这些基础属性设置中,字体选择面板里包含了一个复杂的下拉筛选项:

其中最特殊的就是变量字体 Variable Fonts,因为传统字体每个字重是一个独立的字体文件,安装安装后才能选择,不同字体安装的字重数量不同,就会导致可选字重数不同。

字重选项除了选择字体字重外,斜体、圆体等拓展样式也是用相同的方式安装后在这里进行选择。

Variable Fonts 的逻辑则和前面完全不同,这类字体不用再安装多个字体文件,可以只安装一个字体通过数值来调节它的样式属性。包括字重 Weight、倾斜 Slant、字宽 width、圆角 Round 等。
Variable Fonts 需要安装的字体本身支持,在它的字重设置下除了内置的字重选项外,还会多出个 Variable font axes… 选项,点击就可以进入对应设置面板。

除此之外,文字是置入文本框显示的,而文本框的设置被调整到布局模块内,里面包含的三个选项:

- 自动宽度:默认模式,文字无限向右延伸扩大文本区域
- 自动高度:设置一个文本固定宽度,文本自动换行扩大文本区域
- 固定尺寸:固定文本的长宽,文本会自动换行,超出高度的部分依然会显示,但不包含在文本框的范围内
在文本模块最右下角包含更多选项按钮,点开后的面板包含基础 Basics、细节 Details、变量 Variable(即上面的 Variable font axes…)三个子选项。

在面板中上方的矩形是示例区域,将鼠标悬浮到对应功能上就可以看到相应的效果示例,所以用鼠标轮流悬浮一遍就能大致理解面里面包含的选项有什么作用。

多数设置是英文字体的排版选项,对中文不生效。其中最值得注意的一点,就是 Vertical Trim 用于裁切文本区域最上和最下方的留白,主要也适用于英文字体的特定排版环境(如全屏时钟的数字),不要把它作为移除中文文本区域留白的选项来使用。



