CSS字体层级生成器
在线CSS字体层级生成器，支持基准字号、比例类型与层级数量配置，实时预览并一键生成字体比例系统CSS变量。
已就绪，修改参数后会实时生成字体层级。
基础设置
当前比例
字体预览
CSS变量输出
工具说明
CSS字体层级生成器用于快速建立统一的字体比例系统，帮助你在设计稿与前端样式之间保持一致层级节奏，并一键输出可复用的CSS变量。
什么是字体层级系统
字体层级系统是将标题、正文、说明文字按固定比例组织起来的方法。通过统一比例，可以让页面阅读顺序更清晰，视觉节奏更稳定。
核心功能
- 支持基准字号、比例类型、层级数量三项联动配置，实时生成完整层级。
- 支持从 Caption 到 Display 的层级预览，便于观察不同字号在界面中的视觉关系。
- 支持一键复制 :root CSS 变量，直接接入设计系统与组件样式。
- 所有计算与预览均在浏览器本地完成，不依赖外部服务。
使用步骤
- 输入基准字号，选择比例类型，并设置需要的层级数量。
- 查看实时字体预览，确认各层级在页面中的视觉权重。
- 复制生成的CSS变量，粘贴到全局样式或主题变量文件中。
- 在标题、正文、组件文案中按变量命名统一引用，保持排版一致。
应用场景
- 设计系统中建立统一 Typography Token。
- 营销页、后台系统、文档站的标题层级规范制定。
- 多页面项目的排版重构与样式基线统一。
- 组件库开发阶段的字体变量标准化输出。
常见问题
层级数量设置多少更合适？
常见页面一般使用 6-8 级即可覆盖正文、标题与展示文本；复杂产品可扩展到 9-10 级。
比例类型该如何选择？
内容密集型页面可优先选择小三度或大三度，强调视觉冲击的页面可尝试完全五度或黄金比例。
生成结果可以直接用于 Tailwind 吗？
可以。你可以将生成的变量映射到 Tailwind 主题配置或自定义 utility class 中。
隐私说明
本工具不会上传输入参数和生成结果，所有字体比例计算与代码生成均在本地浏览器执行。