字体比例尺 使用指南

<p><strong>输入：</strong>基 16px、比 1.25、6 档。</p><p><strong>处理：</strong>递推字号。</p><p><strong>输出：</strong>--text-1…6…

核心功能

• 按基数与比例生成等比字号阶梯（display 到 h6 共 7 级）
• 每级同时给出字号与示例文字预览
• 可指定字体族并导出 CSS 变量
• 纯本地计算，不上传任何输入

适用场景

• 统一标题层级。
• 设计系统字号。
• 排版规范。

使用步骤

1. 填写基础字号（正文常用 16px）
2. 设定比例（1.2 紧凑 / 1.25 通用 / 1.333 舒展）
3. 选择字体族以便预览真实观感
4. 核对各级字号与层级落差是否合理
5. 复制 CSS 变量用于项目

实用技巧

• 比例越小层级越平缓，1.2 适合内容密集的后台，1.333 以上适合营销页
• 正文低于 16px 在移动端可读性会下降，基字号不宜过小
• 相邻两级字号差小于 15% 时视觉层级不明显，容易分不清标题层次
• 行高需随字号调整，大字号的行高比应减小，否则标题会显得松散

常见问题

比例选多大？

1.2 紧凑、1.25 通用、1.333 舒展；按气质选。

基字号怎么定？

正文通常 16px 起；过小伤可读，按受众与设备调整。

会保存或上传我的内容吗？

结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。