字体比例计算器
构建一致的标题层级。
输入基准字号并选择比例，即可生成从 H1 到小号文字的完整模块化字体层级，并附带 CSS 代码片段。
1.250
h1敏捷的棕色狐狸39.06pxh2敏捷的棕色狐狸31.25pxh3敏捷的棕色狐狸25.00pxh4敏捷的棕色狐狸20.00pxh5敏捷的棕色狐狸16.00pxp敏捷的棕色狐狸16.00pxsmall敏捷的棕色狐狸12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}如何构建字体层级
- 以像素为单位输入基准字号。
- 选择一个比例，或选择“自定义”自行设置。
- 查看各级标题生成的字号。
- 把 CSS 变量和规则复制到样式表中。
常见问题
应该选择哪个比例？
1.125 和 1.2 层级紧凑细腻；1.333 和 1.618 对比更强烈。大多数网站建议使用 1.2 到 1.25。
为什么 H1 预览被限制了大小？
预览中限制超大字号仅用于显示；CSS 输出仍保留精确的计算值。
可以配合 rem 单位使用吗？
可以。把像素值除以根字号，或在生成的 CSS 中把 px 换成 rem。