排版比例生成器
选择模块化比例、基准字号和单位，生成 h1-h6 与正文的字号比例，并导出为 CSS 变量、Sass 或 rem。
正在加载工具…
排版比例生成器 — 选择一个经典的模块化比例，例如小三度（1.2）、纯四度（1.333）或黄金比例（1.618），设置基准字号和单位，即可立即得到协调的 h1-h6 与正文字号比例。每一级都在实时预览中显示，并以三种格式提供可复制的代码。所有计算都在浏览器中通过简单数学完成，任何字号或设置都不会离开你的设备。
排版比例生成器 是什么？
排版比例生成器是一款免费的浏览器内工具，它将一个基准字号和一个模块化比例转换为一套数学上一致的完整字号比例，涵盖正文以及 h1 到 h6 的标题。模块化比例在每一级用固定比例对基准字号做乘除运算，因此较大的标题以均匀、成比例的跳跃增长，显得刻意而非随意。设计师和前端开发者用它来搭建设计系统的字号令牌、在整个网站中保持标题尺寸一致，并把所选比例转换成可直接粘贴的 CSS。从下拉框选择比例，设置基准字号和单位（px 或 rem），然后将比例复制为 CSS 自定义属性、Sass 变量或纯 rem 列表。
如何使用 排版比例生成器
- 从下拉框选择一个模块化比例，例如小三度（1.2）、纯四度（1.333）或黄金比例（1.618）。
- 在“基准字号”字段中设置基准字号；它将作为正文字号和整个比例的锚点。
- 使用单位分段控件在 px 和 rem 之间切换输出（rem 假定根字号为 16px）。
- 查看实时预览，了解正文和 h1-h6 在各自计算尺寸下的呈现效果。
- 在 CSS 变量、Sass 和 rem 之间切换输出格式，然后用复制按钮复制生成的代码。
示例
基准 16px 的纯四度比例
输入
比例 1.333，基准 16px
输出
正文 16px，h6 21.328px，h5 28.43px，h4 37.897px，h3 50.517px，h2 67.34px，h1 89.764px
黄金比例 CSS 变量
输入
比例 1.618，基准 16px，CSS 变量
输出
:root {
--font-size-body: 16px;
--font-size-h1: 287.072px;
}rem 单位的小三度
输入
比例 1.2，基准 16px，rem
输出
正文：1rem；h1：2.986rem
常见问题
- 什么是模块化比例？
- 模块化比例从一个基准字号开始，对每一个较大的级别乘以固定比例（较小的级别则相除）。这里正文使用基准字号，h6 为基准×比例，h5 为基准×比例的平方，以此类推直到 h1，从而让每个标题与相邻级别保持成比例。
- 提供哪些比例？
- 下拉框提供常见的排版比例，包括小二度（1.067）、大二度（1.125）、小三度（1.2）、大三度（1.25）、纯四度（1.333）、增四度（1.414）、纯五度（1.5）和黄金比例（1.618）。
- px 和 rem 单位有什么区别？
- px 输出绝对像素尺寸，而 rem 输出相对于根元素的尺寸，并假定常见的 16px 默认值。rem 会随用户浏览器字号设置缩放，从无障碍角度看通常更受青睐。
- 三种输出格式分别给我什么？
- CSS 变量生成一个带有 --font-size-* 自定义属性的 :root 块，Sass 生成 $font-size-* 变量，rem 生成一个紧凑的列表，可放入任意样式表或手动引用。
- 我的数据会被发送到服务器吗？
- 不会。整个比例都在你的浏览器本地用简单算术计算。任何字号、比例或单位都不会被上传，因此该工具可离线使用，并能为你的设置保密。