Figma字体设置

Finder / 2025-11-18

一、 Figma 字体设置的底层逻辑 #

Figma 这类 UI 软件中的字体属性设置逻辑，与传统打印排版软件（如 Office、WPS）存在很大差异。

  • 设计目标差异： Figma 的字体设置是面向数字界面和代码实现的规范化设置，而传统软件则更关注文档和打印效果。
  • 一致性要求： 这是因为在 Figma 中定义的字体参数，在最终前端开发时必须保持一致，这样设计才有意义。

二、 Figma 字体设置的五大核心参数 #

Figma 中字体设置关注以下几个核心参数：

1. 字族（Font Family） #

  • 定义： 指的是文字的图形风格。不同的字体有不同的样式。
  • 加载逻辑： 字体保存在字体文件内。系统安装字体文件后，会加载这些文件来渲染对应的图形。字体文件本身是图形的合辑，每个矢量图形代表一个文字，并被赋予一个独立编码。
  • 跨平台显示： 如果系统没有安装该字体，用户将无法看到该文字。
    • 主流系统默认字体： iOS 使用平方；安卓使用思源；小米是 Mi Sans；华为是 HarmonyOS Sans；Windows 是微软雅黑。
    • 设计标准： 整体上，UI 设计通常以平方作为标准进行设计。
  • Figma 字体选择： Figma 内置了一部分英文字体。同时，用户可以加载本地字库文件。
    • 本地字体加载： 网页端用户如果需要使用本地字体，必须安装对应的网页字库插件。
    • 专业建议： 专业角度而言，建议限制字体安装数量，只安装会用到的字体类型。

2. 字号（Font Size） #

  • 定义： 用于控制文字图形大小的数字。
  • 实际尺寸： 字号（例如 100 像素）实际控制的是文字区域（字行）的维度。
  • 与行高的关系： 文案选中区域外部多出来的区域是行高（Line Height）。
  • 设置建议： 在 UI 设计环境中，不需要关注字体本身是否是偶数的问题。
  • 中文常用字号范围（经验值）：
    • 标题： 16 到 30 号之间。
    • 正文： 13 到 16 号之间。
    • 注释： 10 到 12 号之间。

3. 字重（Font Weight） #

  • 定义： 也叫 font-weight，本质是文字的粗细。
  • 依赖性： 字重来源于字体文件本身。如果字体只带有一个字重（如 regular），用户就无法进行粗细调节。
  • 与传统软件的区别： 在 UI 设计中，不能像 PS 或 WPS 那样点击“B”键强行加粗。必须在右侧属性面板中选择字体自带的字重选项。
  • 中文字重： 如果输入的是中文，必须使用中文的字重才能显示正确的加粗效果。
  • 特殊格式：
    • 可变字体（Variable Font）： 是一种新的字体文件格式。它允许用户进行无极选项调节，对字宽、字重等参数进行非常精细的控制（例如 1、2、3、4、5、6… 递进）。这种格式在未来可能解决传统字体文件中字重文件过多、体积大的问题。

4. 行高（Line Height） #

  • 定义： 行高是文字单行占据高度的设置。它控制的是文本行之间的垂直间距，而不是字间距。
  • 核心逻辑： 单行文本的高度一定要大于文字本身的大小。如果两者一样大，则中间没有缝隙（即为 0）。
  • 默认设置： 默认是自动（Auto），Figma 会预留上下空间，这是非常正常的排版形式。
  • 设置风险：
    • 不建议减少： 强烈不建议随意减少默认行高。
    • 如果将行高设置得过小，会导致多行文本崩塌、文字重叠，甚至特殊符号（如句号、‘j’）外溢出文本区域，造成严重的显示问题。
  • 控制多行间距： 如果需要设置多行内容的间距，是通过行高来控制的。

5. 字间距（Letter Spacing） #

  • 定义： 控制文字左右间隙的大小。
  • 单位： 字间距的调节是以百分比形式进行的。这个百分比是基于字号大小计算的。
  • 应用场景差异：
    • 中文环境： 中文是填字格式的矩形排列模式，不需要去设置字间距。
    • 英文环境（拉丁文）： 英文是拉丁文排列模式，每个字母的字宽不一样，需要控制节奏。苹果等官方规范会给出不同字号对应的建议字间距点。字间距主要用于英文字符的排版。

三、 文本区域与排版模式 #

Figma 提供了三种文本区域模式，以及多种对齐方式：

1. 文本区域模式（Text Box Sizing） #

这些设置位于属性面板的 Layout（布局）区域：

  1. 自动宽度（Auto Width / Autoest）： 文本的宽度会随着输入内容的增加而不停延伸。
  2. 固定宽度/自动高（Fixed Width / Auto to High）： 固定文本区域的宽度。当文本内容超出固定宽度时，高度会自动扩展。
  3. 固定尺寸（Fixed Size）： 文本的高和宽都被固定。如果文本超出区域，可能会导致内容被裁剪或隐藏。
  • 创建方式： 点击 T 键后直接点击画布是创建自动宽度文本。点击 T 键后拖拽一个区域，是创建一个固定尺寸的文本区域。

2. 对齐方式 #

  • 基本对齐： 包括左对齐、居中、右对齐。
  • 垂直对齐： 包括上对齐、居中对齐、下对齐。
    • 使用条件： 垂直对齐必须在文本框处于固定尺寸且高度超出文本内容的情况下才能生效。

3. 更多排版细节（More Settings） #

  • 两端对齐（Justified）： 用于文本的左右均匀分布布局。
    • 使用建议： 在中文设置中绝对不会使用。在正常的英文排版中也基本不用。因为两端对齐会破坏文字的节奏和间距，严重影响阅读可用性。
  • 特殊样式： 包括下划线、删除线。
  • 大小写： 可以直接进行大写和小写转换。
  • 列表样式（List Style）： 支持输入一个横线后按空格，自动变成列表（圆点或数字列表）。
  • 段间距（Paragraph Spacing）： 在“更多面板”（More Panel）中，可以添加段落之间的垂直间距。这对于提高多段文本的阅读性非常重要，避免段落和段落之间过于接近。
  • 文本隐藏： 可以将超出的文字隐藏，并显示为省略号（点点点）。

总结：

Figma 的字体设置就像是为一栋建筑物（设计稿）定义结构参数。传统的排版软件只关心这栋楼打印出来的样子；而 Figma 不仅要关心样子，更要关心它未来在网络上“被搭建”时（前端开发）的工程规格。每一个参数（字号、行高、字重）都必须精确，因为它将直接决定文字这个“建筑材料”在各种设备容器（Frame）中如何响应和展示。

#Figma学习指南 #学习笔记

最后一次修改于 2025-11-18