企业官网建设流程全解析

• 前端
• UI组件

typeRampMinus1LineHeight是@microsoft/fast-components（FAST Frame 设计系统）导出的一个排版类设计令牌（Design Token），用于定义排版坡道（Type Ramp）中"Minus 1"级别（即比正文字体小一档的辅助文字）的行高。本文基于当前仓库中的 API 文档与设计令牌文档，系统讲解该变量的类型签名、在完整排版坡道中的位置、底层 Design Token 工作机制，以及在实际组件样式与运行时的使用方法，帮助你掌握如何在 FAST 设计系统中声明、覆盖和消费行高类设计令牌。

typeRampMinus1LineHeight 是什么

根据仓库中的 API 文档 fast-components.typerampminus1lineheight.md，typeRampMinus1LineHeight是@microsoft/fast-components模块公开导出的一个变量（variable），其完整类型签名如下：

typeRampMinus1LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>

从签名可以解读出三层信息：

1. 所属模块：该变量由@microsoft/fast-components导出，即 FAST Frame 设计系统的组件与样式包；它的类型引用自@microsoft/fast-foundation，说明底层实现由 FAST Foundation 的 Design Token 基础架构提供。
2. 令牌类型：它是一个CSSDesignToken<string>。CSSDesignToken是 FAST Foundation 中会向 CSS 自定义属性（Custom Property）发射值的设计令牌类型，其泛型参数string表示该令牌的值类型为字符串——行高在 CSS 中通常以px、rem、em或无单位数字等形式出现，以字符串承载。
3. 命名语义：typeRamp表示它隶属于 FAST Frame 的"排版坡道"令牌族；Minus1表示它对应坡道上比 Base（正文）小一档的层级；LineHeight表示它管理的是行高而非字号（字号由同名姊妹令牌typeRampMinus1FontSize管理，见 fast-components.typerampminus1fontsize.md）。

排版坡道中的位置：Minus 1 级别

FAST Frame 的排版设计围绕一条"排版坡道"（Type Ramp）展开，坡道上的每一级都由一对令牌组成：字号（Font Size）与行高（Line Height）。typeRampMinus1LineHeight是坡道上"Minus 1"（比正文小一档）级别的行高令牌。

仓库中的设计系统文档 fast-frame.md 给出了 FAST Frame 完整的排版坡道令牌命名表：

在 FAST 组件的 API 参考清单（fast-components.md）中，这 18 个排版令牌全部作为独立的导出变量列示，typeRampMinus1LineHeight与typeRampMinus1FontSize相邻成对出现，印证了"字号 + 行高成对构成一级排版"的设计约定。

从语义上看，Minus 1 级别通常用于正文之下的辅助性文字——例如表单的辅助说明、次要标签、脚注、时间戳等小字号文本。此时typeRampMinus1LineHeight负责为该级别的文字提供与之匹配的行高，保证小字号文本在多行场景下仍具备舒适的阅读行距。

说明：本文所引用的 1.x API 文档由 API Documenter 自动生成，原文并未给出typeRampMinus1LineHeight的默认行高数值。具体默认值由 FAST Frame 的令牌定义与对应的组件样式消费逻辑决定，应用层可通过下文介绍的 Design Token API 获取或覆盖。

CSSDesignToken ：底层的设计令牌机制

要真正理解typeRampMinus1LineHeight的行为，需要回到 FAST Foundation 的 Design Token 实现。仓库中的 design-tokens.md 对该机制做了完整说明：Design Token 是一种语义化、具名的变量，用来描述设计系统（如排版、颜色、尺寸、间距等）中的设计概念。

CSSDesignToken<string>本质上是 FAST Foundation 中具备CSS 自定义属性发射能力的设计令牌：

• 按节点设置作用域：令牌的值针对某个FASTElement或HTMLBodyElement节点设置，因此同一令牌可以在不同的 DOM 子树中拥有不同的值，实现局部覆盖。
• 自动发射 CSS 变量：默认情况下，只要为某个元素设置了令牌值，令牌就会自动以 CSS 自定义属性的形式发射到该元素（除非创建时显式配置为不发射）。typeRampMinus1LineHeight对应发射的 CSS 自定义属性名称即为--type-ramp-minus-1-line-height形式的变量，可直接在组件样式外层使用。
• 默认值发射：令牌的默认值需要DesignToken.registerRoot()（或通过DesignSystem.register()自动触发）后才会向文档（或指定的根元素）发射为 CSS 自定义属性。

设置、获取与删除值

设计令牌的常规取值 API 如下（以typeRampMinus1LineHeight为例）：

// 为某个元素（或其 DOM 子树）设置行高令牌值 typeRampMinus1LineHeight.setValueFor(element, "24px"); // 读取某元素实际生效的令牌值（取最近祖先的设置值） const lineHeight = typeRampMinus1LineHeight.getValueFor(element); // 删除某节点上的显式设置，回退到最近祖先的值 typeRampMinus1LineHeight.deleteValueFor(element);

如果希望在不做任何覆盖时，所有未设置该令牌的节点都能拿到一个兜底值，可以调用withDefault()声明默认值：

typeRampMinus1LineHeight.withDefault("20px");

订阅变化

DesignToken支持订阅：当令牌值在文档树中发生变化时，订阅者会收到通知。既可以订阅整个文档范围内的变化，也可以只订阅某个具体元素的变化：

const subscriber = { handleChange(record) { console.log(`DesignToken ${record.token} changed for element ${record.target}`); } }; // 订阅任意元素上的变化 typeRampMinus1LineHeight.subscribe(subscriber); // 只订阅某个特定元素上的变化 typeRampMinus1LineHeight.subscribe(subscriber, targetElement); // 取消订阅 typeRampMinus1LineHeight.unsubscribe(subscriber); typeRampMinus1LineHeight.unsubscribe(subscriber, targetElement);

这一机制使得基于typeRampMinus1LineHeight的组件能够在应用层调整行高后，自动获得样式更新通知，而无需组件手动监听。

派生值与别名

typeRampMinus1LineHeight作为标准设计令牌，同样支持两类高级用法：

• 派生值：可以为令牌设置一个接收目标元素作为参数的函数，返回值类型必须匹配令牌的泛型（此处为string）。派生函数内部可以读取其他令牌，形成依赖关系；当被依赖的令牌或可观察属性变化时，派生值会自动重算并更新对应的 CSS 自定义属性。
• 别名（Aliasing）：可以将一个令牌的值直接设置为另一个令牌，从而在令牌之间建立引用关系，适合在复杂的设计令牌层级中复用行高定义。

在组件样式中消费行高令牌

在 FAST 组件中，typeRampMinus1LineHeight可以像普通值一样直接嵌入css模板字符串，FAST 会在运行时把它替换为对应的 CSS 自定义属性，并确保该自定义属性被添加到元素上：

import { css } from "@microsoft/fast-element"; import { typeRampMinus1FontSize, typeRampMinus1LineHeight } from "@microsoft/fast-components"; const styles = css` .caption { font-size: ${typeRampMinus1FontSize}; line-height: ${typeRampMinus1LineHeight}; } `;

这样定义的样式会自动消费当前 DOM 树中对该令牌设置的值（无论是 FAST Frame 的默认值，还是应用层通过setValueFor()/withDefault()覆盖后的值），实现行高与字号在"Minus 1"层级上的协同。

结合 fast-frame.md 中关于样式配置的说明，FAST Frame 允许通过 Design Token 对组件进行大幅度视觉定制而几乎不修改代码——修改typeRampMinus1LineHeight这类令牌即可整体调整所有消费它的组件文本的行距。

典型应用场景

在实际项目中，typeRampMinus1LineHeight通常与typeRampMinus1FontSize搭配使用，服务于正文以下一档的 UI 文本，常见场景包括：

• 表单字段下方的辅助说明文字、校验提示；
• 列表项中的次要元信息（时间戳、作者、来源）；
• 脚注、角标、标签（Tag）等小字号文本；
• 需要满足多行换行且行距一致的紧凑型信息区块。

当应用需要全局收紧或放宽这一层级的行距时，只需在入口处对令牌做一次withDefault()或setValueFor()覆盖，所有消费该令牌的组件样式会自动同步。

小结

typeRampMinus1LineHeight是 FAST Frame 排版坡道中"Minus 1"层级的行高设计令牌，其类型签名CSSDesignToken<string>明确了"值类型为字符串、可发射 CSS 自定义属性"的特性。本文结合仓库中的 API 参考、排版坡道令牌表 与 Design Token 完整文档，梳理了它的定位、底层机制与消费方式。继续阅读同一目录下的其他排版令牌文档（如typeRampBaseLineHeight、typeRampPlus1LineHeight等），可以构建出对 FAST Frame 排版体系更完整的认识。

• 前端
• UI组件