SuperAPI AI 工具集

sgds-utilities-typography

设计与创作

查看项目

更新于 10-15 21:54

技能介绍

用途:为使用 SGDS Web Component 的项目提供排版工具类,统一文本的字号、字重、行高、字距和字体族。

前提:需先完成 sgds-utilities-setup 技能的配置;排版工具类需要引入 utility CSS,但不依赖主题文件,因此不具备主题感知能力。

主要能力:所有工具类使用 sgds: 前缀。字号支持语义角色工具类(display、heading、subtitle、body、label、caption、overline)以及原始刻度 sgds:text-{size}(xs 到 9-xl);字重为 sgds:font-{weight}(thin 到 black);行高支持语义工具类(sgds:leading-3-xs 到 sgds:leading-3-xl)与原始像素工具类 sgds:leading-{px};字距为 sgds:tracking-{size}(tighter 到 widest);字体族为 sgds:font-sans 与 sgds:font-mono。

使用方式:优先使用语义化字号与行高工具类,它们编码了设计意图,底层 token 变化时保持一致;仅当没有匹配的语义角色时才回退到原始刻度或像素工具类。行高语义 token 定义在 responsive.css 中,具有响应式特性。代码场景统一使用 sgds:font-mono。标题层级用 semibold/bold,正文用 normal/medium。大号展示文字配较小行高,正文阅读文字配较大行高。

参考文档:reference/type-properties.md 提供字号、字重、行高、字距、字体族的完整刻度表与 token 值;reference/patterns.md 提供展示标题、章节标题、正文、表单标签、链接、代码块、按钮、引用、统计等常见 HTML 模式。

限制:资料未提供具体安装命令、版本要求、浏览器兼容性及收费信息。