Typography Token 是对字体样式进行语义化命名的封装，用于统一管理字号、字重、行高等，解决协作中样式不一致问题，需集中定义、避免硬编码，正确消费方式为 class 绑定或 setProperty 动态注入。
HTML 本身没有“字体 Token”这个概念，所谓 Typography Token 是设计系统或前端工程化中的抽象，不是 HTML 原生语法支持的特性。直接在 <style> 或 class 里写 font-size: var(--font-size-lg) 并不等于自动有了 Token 管理——它只是 CSS 自定义属性的用法，Token 的价值在于统一定义、集中维护、跨平台同步。
Typography Token 是什么，为什么不能直接写 font-size="16px"
Typography Token 是对字体样式（字号、字重、行高、字体族）做的语义化命名封装，比如：--font-size-body、--font-weight-bold、--line-height-title。它的作用不是炫技，而是解决多人协作中“同样标题该用 24px 还是 1.5rem”“按钮文字该用 Medium 还是 SemiBold”的分歧。硬编码像素值会让设计变更时需要全局搜索替换，而 Token 只需改一处变量定义。
CSS 自定义属性 + :root 是最轻量落地方式
无需构建工具也能用，但要注意浏览器兼容性（IE 不支持）。关键不是“怎么声明”，而是“怎么组织不混乱”：
- 所有 Typography Token 必须统一收口在
:root或一个单独的typography.css文件里，禁止散落在各个组件中 - 命名必须带语义前缀，例如
--type-heading-xl比--h1更可靠（后者容易和 HTML 标签名混淆，且无法表达响应式变体） - 数值推荐使用
rem或无单位数字（用于line-height），避免混合使用px/em/rem导致缩放错乱 - 不要把字体族（
font-family）也塞进同一个变量，应拆成--font-family-primary和--font-family-code，否则后期换中文字体时会牵连代码块样式
示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--type-size-xs: 0.75rem;
--type-size-sm: 0.875rem;
--type-size-base: 1rem;
--type-weight-regular: 400;
--type-weight-semibold: 600;
--type-line-height-body: 1.5;
}
用 PostCSS 或 Sass 自动生成响应式变体
纯 CSS 无法循环生成断点变体，但多数项目已有构建流程。这时 Token 就不该手写，而应由工具生成：
- PostCSS 插件如
postcss-typography-tokens可读取 JSON 配置，输出带@media的多断点规则 - Sass 中用
@each遍历 map，生成.text-xs、.text-sm@md等实用类，但注意别让 class 名膨胀到影响可维护性 - 警惕“Token 工具链过度设计”：如果团队连
rem单位都还没对齐，先推postcss生成器只会增加理解成本
HTML 中怎么安全消费 Typography Token
HTML 不解析 Token，只负责承载 class 或内联 style。真正起效的是 CSS 层。常见错误包括：
- 在
<p class="text-lg">中硬编码样式，却没在 CSS 里定义.text-lg→ 实际是无效 class，不是 Token 失效 - 用 JS 动态设置
element.style.fontSize = 'var(--type-size-base)'→ 无效，因为内联 style 不解析 CSS 变量，必须用setProperty() - 服务端渲染时把 Token 值提前计算成像素（如
style="font-size: 16px"）→ 失去响应式与主题切换能力，属于反模式
正确做法只有两种：class 绑定预设样式，或通过 element.style.setProperty('--type-size-base', '1.125rem') 动态注入变量值。
真正难的不是写几个 var(--xxx)，而是让设计师、前端、后端对同一套命名达成共识，并确保每次字体调整都走 Token 更新流程而不是绕过它直接改 CSS。一旦松动，半年后你就会在审查元素里看到 font-size: 18.5px 这种幽灵值。
