Lona项目中的文本样式定义规范详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00632/article/details/148443404

Lona项目中的文本样式定义规范详解

Lona A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts. 项目地址: https://gitcode.com/gh_mirrors/lo/Lona

前言

在UI设计系统中，文本样式(Typography)是构建视觉一致性的重要组成部分。Lona作为一款优秀的设计系统工具，提供了完善的文本样式定义规范，让设计师和开发者能够高效地管理和使用文本样式。本文将深入解析Lona中的文本样式定义规范，帮助读者全面掌握这一重要功能。

文本样式文件结构

Lona的文本样式定义采用JSON格式，文件通常命名为textStyles.json。该文件包含两个主要部分：

styles数组：包含所有文本样式定义的集合
defaultStyleName字段（可选）：指定新建文本时默认使用的样式ID

文本样式属性详解

每个文本样式对象包含多个属性，下面我们将详细解析每个属性的作用和用法：

基础属性

id (必填)：样式的唯一标识符，将用于代码生成
- 命名规范：建议使用小写字母和下划线组合
- 示例：heading_1, body_text
name (必填)：人类可读的样式名称，用于设计工具界面显示
- 示例："主标题", "正文文本"
comment (可选)：样式描述信息，说明使用场景和注意事项
- 示例："用于页面主标题，字号较大，字重较轻"

字体相关属性

fontName (可选)：特定字体名称
- 示例："PingFangSC-Regular"
fontFamily (可选)：字体家族名称
- 示例："Helvetica Neue"
fontWeight (可选)：字体粗细，使用CSS标准值
- 取值范围：100-900，以100为增量
- 常见值："300"(Light), "400"(Regular), "700"(Bold)
fontSize (可选)：字号大小，单位为像素
- 示例：16

排版相关属性

lineHeight (可选)：行高，单位为像素
- 建议值：通常为字号的1.2-1.5倍
- 示例：字号16时，行高可设为24
letterSpacing (可选)：字符间距调整
- 正值增加间距，负值减少间距
- 示例：0.5(增加0.5px间距), -0.3(减少0.3px间距)

颜色属性

color (可选)：文本颜色
- 可接受两种格式：
  - 直接CSS颜色值："rgba(0,0,0,0.9)"
  - 颜色定义文件中定义的ID："primaryText"

继承属性

extends (可选)：继承其他文本样式
- 值为要继承的样式ID
- 继承机制：当前样式会继承指定样式的所有属性，并可覆盖特定属性

实际应用示例

下面是一个完整的文本样式定义示例，包含了多种常见样式：

{
  "defaultStyleName": "body",
  "styles": [
    {
      "id": "display_large",
      "name": "大标题",
      "comment": "用于页面主标题，视觉层次最高",
      "fontFamily": "PingFang SC",
      "fontWeight": "500",
      "fontSize": 48,
      "lineHeight": 56,
      "color": "text_primary"
    },
    {
      "id": "heading_1",
      "name": "标题1",
      "extends": "display_large",
      "fontSize": 32,
      "lineHeight": 40
    },
    {
      "id": "body",
      "name": "正文",
      "fontFamily": "PingFang SC",
      "fontWeight": "400",
      "fontSize": 16,
      "lineHeight": 24,
      "color": "text_primary"
    },
    {
      "id": "caption",
      "name": "辅助文本",
      "extends": "body",
      "fontSize": 12,
      "lineHeight": 16,
      "color": "text_secondary"
    }
  ]
}