⚙️ 比例设置
👁️ 比例尺预览
📋 代码导出
模数比例计算器能做什么？
模数比例计算器是一款排版设计工具，基于数学比例关系自动生成和谐的字体大小体系。选择经典比例因子（黄金比例、大三度、纯四度等），即可获得从微小文字到超大标题的完整字体层级。
核心功能
- 📐 8种经典比例 — 从次二度到黄金比例，覆盖常见排版需求
- 👁️ 实时预览 — 所见即所得，调整参数即时看到效果
- 📋 多格式导出 — CSS变量、Tailwind配置、SCSS变量一键导出
- 🔧 自定义比例 — 支持输入任意比例因子
- 📏 多单位支持 — rem、px、em三种单位自由切换
应用场景
- 设计系统构建 — 为Design System建立统一的字体层级规范
- 网站开发 — 快速生成CSS变量，统一管理字体大小
- Tailwind项目 — 生成自定义Tailwind字体配置
- 品牌设计 — 为品牌页面选择合适的排版比例
扩展知识
字体比例尺源自音乐理论中的音程关系。每个比例因子对应一个音乐音程：1.25是大三度（4个半音），1.333是纯四度（5个半音），1.618是黄金比例。这些比例在视觉上产生和谐的层级感，因为相邻级别之间保持一致的数学关系。现代设计系统（如Material Design、Apple HIG）都采用类似的字体比例体系。
常见问题 FAQ
什么是字体比例尺？
字体比例尺是一组基于数学比例关系的字体大小序列，通过固定比例因子递增或递减，形成和谐的排版体系。常见比例包括黄金比例（1.618）、大三度（1.25）、纯四度（1.333）等。
如何选择合适的比例因子？
选择比例因子取决于设计需求：1.067适合紧凑界面，1.2适合内容密集型网站，1.25是通用选择，1.333适合标题突出的设计，1.618适合大气的品牌页面。比例越大，层级对比越强。
生成的CSS变量如何使用？
将生成的CSS变量复制到样式表中，通过var(--font-size-sm)等方式引用。例如：h1{font-size:var(--font-size-3xl)}，p{font-size:var(--font-size-base)}。修改一处全局生效。
什么是rem单位？
rem（root em）是相对于根元素字体大小的单位。1rem等于html元素的font-size值（默认16px）。使用rem的优势：支持用户自定义浏览器字体大小、方便全局缩放、避免em的嵌套计算问题。
如何与Tailwind CSS集成？
将生成的Tailwind配置复制到tailwind.config.js的theme.extend.fontSize中，就可以使用text-xs、text-sm、text-base等Tailwind类名，但大小值会使用你的自定义比例尺。