前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载导读typeRampMinus2FontSize是 FAST 1.x 设计系统FAST Frame暴露的字体大小设计令牌Design Token对应类型层级type ramp中「Minus 2」这一最小字号级别用于正文之外的小号辅助文本、标签和元信息场景。本文将从其 API 签名入手结合 FAST Frame 设计系统文档 与 Design Tokens 机制文档讲清该令牌在类型层级中的定位、CSSDesignTokenstring的底层原理以及读取、覆写、注册默认值的完整实战方法。一、API 签名与变量定位该变量由microsoft/fast-components包导出其完整签名如下源自 API 参考页typeRampMinus2FontSize: import(microsoft/fast-foundation).CSSDesignTokenstring关键信息有两点类型CSSDesignTokenstring——这是microsoft/fast-foundation中一种会向 CSS 发射自定义属性custom property的设计令牌接口其值类型为字符串字面量形如10px。语义名字中的Minus 2表明它位于类型层级中「基准Base以下第 2 级」也就是整套字号阶梯中最小的那级。在 fast-components API 总览 中它与其他typeRamp*令牌typeRampMinus1FontSize、typeRampBaseFontSize、typeRampPlus1FontSize直至typeRampPlus6FontSize并列出现共同构成完整的排版字号/行高令牌族。二、在 FAST Frame 类型层级中的位置FAST Frame 设计系统围绕一个 9 级字号阶梯组织排版。typeRampMinus2FontSize位于阶梯最底端与行高令牌typeRampMinus2LineHeight成对出现。完整的令牌对照表见 FAST Frame 设计系统文档层级字号令牌名行高令牌名Minus 2最小typeRampMinus2FontSizetypeRampMinus2LineHeightMinus 1typeRampMinus1FontSizetypeRampMinus1LineHeightBase正文typeRampBaseFontSizetypeRampBaseLineHeightPlus 1typeRampPlus1FontSizetypeRampPlus1LineHeightPlus 2typeRampPlus2FontSizetypeRampPlus2LineHeightPlus 3typeRampPlus3FontSizetypeRampPlus3LineHeightPlus 4typeRampPlus4FontSizetypeRampPlus4LineHeightPlus 5typeRampPlus5FontSizetypeRampPlus5LineHeightPlus 6最大typeRampPlus6FontSizetypeRampPlus6LineHeight可以看出typeRampMinus2FontSize是整个阶梯的锚点之一它在Base之下两级通常用于需要小于正文但依然保持可读的辅助信息如输入框前缀、时间戳、小徽标文本而正文大小由typeRampBaseFontSize定义最大展示字号由typeRampPlus6FontSize定义。实际渲染中该令牌的值与行高令牌配合使用保证最小字号场景下的行距与节奏一致性。三、底层接口CSSDesignToken 意味着什么3.1 CSSDesignToken 接口结构从 CSSDesignToken 接口文档 可以看到该接口的完整定义是export interface CSSDesignTokenT extends string | number | boolean | BigInteger | null | Arrayany | symbol | ({ createCSS?(): string; } RecordPropertyKey, any) extends DesignTokenT, CSSDirectivetypeRampMinus2FontSize的类型参数为string完全满足这一约束。该接口同时继承了DesignTokenT令牌的取值/设值/订阅能力与CSSDirective可被嵌入css模板的指令能力因此它既可以像普通令牌那样在 JavaScript 中读写也可以直接用在css模板字符串中参与样式编译。3.2 两个补充成员接口还暴露了两个成员cssCustomProperty文档类型为string表示「当令牌配置为写出 CSS 自定义属性时格式化后的属性名」。对typeRampMinus2FontSize而言其默认 CSS 自定义属性名即为--type-ramp-minus-2-font-size这类与令牌名一致的命名。createCSS()文档将令牌值转换为 CSS 字符串的方法。对于string类型的字体大小值它直接产出可在样式表中使用的 CSS 文本。由于typeRampMinus2FontSize同时满足CSSDirective它可以在css模板中作为指令直接展开。这正是 FAST Frame 组件样式内部引用该令牌的方式——组件不硬编码字号而是引用令牌变量从而让设计系统的样式可整体被覆写。四、读取与覆写该令牌的实战方法4.1 为特定 DOM 子树设置值DesignToken的值是按节点树作用域的可以给某个FASTElement或HTMLBodyElement节点设置值该值对该节点及其所有后代生效从而实现「同一令牌在不同 DOM 树中取不同值」。这一能力来自 DesignToken.setValueFor()签名如下setValueFor(element: HTMLElement, value: DesignTokenValueT | DesignTokenT): void;例如将最小字号令牌在某个容器内统一缩小import { typeRampMinus2FontSize } from microsoft/fast-components; const container document.querySelector(my-widget) as HTMLElement; typeRampMinus2FontSize.setValueFor(container, 9px);此后container内所有用到该令牌的组件样式都会取9px而容器外的 DOM 树不受影响。设置给某个节点后令牌会自动向该节点发射对应的 CSS 自定义属性详见下文第五节。4.2 设置全局默认值若不希望逐个节点设置可以用withDefault()文档为整个文档提供默认值。当某个节点树中找不到任何已设置的值时getValueFor()将回退到默认值typeRampMinus2FontSize.withDefault(11px);withDefault()返回this因此支持链式调用便于在设计系统初始化阶段集中配置。4.3 读取值使用getValueFor()读取某节点上生效的值。返回的是**最近祖先节点或元素自身**所设置的值这保证了嵌套组件场景下的正确性const size typeRampMinus2FontSize.getValueFor(container);删除某节点的自定义值则可调用deleteValueFor()删除后该节点将重新回落到祖先节点或默认值。4.4 在 css 模板中直接引用得益于CSSDirective能力令牌可直接嵌入 FAST 的css模板import { css } from microsoft/fast-element; import { typeRampMinus2FontSize, typeRampMinus2LineHeight } from microsoft/fast-components; const styles css .label { font-size: ${typeRampMinus2FontSize}; line-height: ${typeRampMinus2LineHeight}; } ;这里typeRampMinus2FontSize作为指令展开为对 CSS 自定义属性的引用当令牌值在运行时被修改时样式会自动同步更新无需重新编译模板。这正是 FAST Frame「以令牌驱动视觉设计、极小代码量实现整体换肤」的基础。五、CSS 自定义属性发射机制5.1 默认自动发射DesignToken在「值被设置到元素上」时会自动把该值发射为 CSS 自定义属性除非显式关闭。对CSSDesignTokenstring这类令牌发射过程由createCSS()产出字符串值。这意味着设置typeRampMinus2FontSize.setValueFor(node, 9px)后node上会得到类似--type-ramp-minus-2-font-size: 9px;的内联自定义属性纯 CSS 上下文如伪元素或非组件样式也能消费它。5.2 默认值需要注册根节点一个需要注意的边界默认值不会自动发射。只有当调用DesignToken.registerRoot()之后默认值才会以 CSS 自定义属性形式发射到文档或指定的根元素上。完整流程见 Design Tokens 文档DesignToken.registerRoot(); // 将默认值发射为全局 CSS 自定义属性 // 或将发射范围限定到某个根元素 const root document.querySelector(#root)! as HTMLDivElement; DesignToken.registerRoot(root); // 撤销 DesignToken.unregisterRoot(root);如果使用DesignSystem注册组件则令牌根的注册会在DesignSystem.register()时自动完成并可通过DesignSystem.withDesignTokenRoot()指定根元素或传入null关闭自动注册。5.3 自定义属性名的定制与关闭令牌名默认即 CSS 自定义属性名。如需改名或关闭发射可在创建令牌时通过配置对象控制——这同样适用于自定义令牌DesignToken.createnumber({ name: my-token, cssCustomPropertyName: my-css-custom-property-name // 改名发射 }); DesignToken.createnumber({ name: my-token, cssCustomPropertyName: null // 禁止发射到 CSS });对typeRampMinus2FontSize这类由microsoft/fast-components预置的令牌你无法修改其创建配置但完全可以利用「按节点设置值」与「默认值」两种方式来改变其运行时取值。六、组合实战基于最小字体令牌的整体排版覆写结合前文一个完整的「调整全站最小字号」方案如下import { provideFASTDesignSystem, fastButton, fastTextField, typeRampMinus2FontSize, typeRampMinus2LineHeight } from microsoft/fast-components; import { DesignSystem } from microsoft/fast-foundation; // 1. 设置文档级默认值在 register 之前调用确保发射到自动注册的根 typeRampMinus2FontSize.withDefault(10px); typeRampMinus2LineHeight.withDefault(14px); // 2. 注册设计系统与组件 provideFASTDesignSystem() .withPrefix(fast) .register(fastButton(), fastTextField()); // 3. 对特定区域做局部微调 const sidebar document.querySelector(fast-toolbar) as HTMLElement; typeRampMinus2FontSize.setValueFor(sidebar, 9px);执行顺序上需要注意DesignSystem.register()会自动完成令牌根注册因此默认值应先于register()设置否则默认值对应的 CSS 自定义属性可能不会被发射到文档根。而setValueFor()与注册顺序无关——它始终直接作用于目标节点。七、小结typeRampMinus2FontSize是 FAST 1.x 类型层级中最小一级的字号设计令牌其本质是一个类型为CSSDesignTokenstring的变量既是可读写、可订阅的DesignToken又是可嵌入css模板的CSSDirective。它通过「节点作用域设值 文档级默认值 自动 CSS 自定义属性发射」三层机制参与样式系统运转是理解 FAST Frame 设计令牌体系的理想切入点。想深入了解更多令牌颜色、间距、圆角等与自适应配色系统可继续阅读 FAST Frame 设计系统 与 Design Tokens 文档。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐深入理解 FAST Frame 的 neutralFillLayerRestDelta层叠配色中的层级差设计令牌深入理解 FAST Frame 的 neutralFillLayerRestDelta层叠配色中的层级差设计令牌 FAST Frame microsoft前端UI组件FAST Frame 中的 baseLayerLuminance 设计令牌掌控层级色彩与明暗模式切换FAST Frame 中的 baseLayerLuminance 设计令牌掌控层级色彩与明暗模式切换 baseLayerLuminance 是 micros前端UI组件FAST 1.x fastDesignSystemProvider 全面解析DesignSystem 注册与设计令牌分发实战FAST 1.x fastDesignSystemProvider 全面解析DesignSystem 注册与设计令牌分发实战 fastDesignSystem前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考