CSS标题字号生成器

CSS标题字号生成器是一款面向前端开发、网页设计和内容排版场景的实用在线工具，主要用于快速推算 H1 到 H6 的标题字号层级。很多人在制作网站页面、博客主题、后台模板或工具站时，虽然知道标题需要分层，但往往不容易一次性确定每一级标题究竟该设置多大才合适。这个工具的作用就是帮助用户输入一个已知标题字号，再结合比例规则，自动推算出完整的 H1-H6 标题字号方案，并同步输出可直接复制使用的 CSS 代码。

功能说明

• 基准标题：可选 H1–H6 任意一级作为已知字号。。
• 基准字号：支持 1.5rem、24px 等形式；只写数字时按 rem 处理。
• 逐级比例：相邻两级的大小倍数（默认 1.25，即上一级 ≈ 下一级 ×1.25，符合常见排版阶梯）。
• 根字号：默认 16px，用于 rem ↔ px 换算；结果里主行是 rem，右侧为约等 px。
• 公式：对级别 (L)（H1=1…H6=6），在基准级别为 (B)、基准换算成 px 为 (P) 时：
  (\text{size}(L) = P \times \text{ratio}^{,B-L})
  因此以 H1 = 1.5rem、比例 1.25、根 16 为例：H1=1.5rem，H2≈1.2rem，H3≈0.96rem，以此类推。
• 底部提供可复制的 h1–h6 的 font-size CSS 片段（统一用 rem）。

如何使用这个工具

使用过程并不复杂，即使没有设计基础也能很快上手。

1. 先选择一个已知的基准标题级别，例如 H1 或 H2。
2. 输入对应的基准字号，可以填写 rem、px，或直接输入数字。
3. 设置逐级比例，默认 1.25 即可满足大多数网页排版需求。
4. 确认根字号，通常保持 16px 即可。
5. 点击生成后，即可得到 H1 到 H6 的完整字号结果和 CSS 代码。