字体模块化刻度生成器
根据基准字号和比率(Major Third、黄金比、Perfect Fifth 或自定义值)生成和谐的排版模块化刻度。获取完整的级别表，以及可直接粘贴的 CSS 自定义属性、SCSS 变量、Tailwind fontSize 配置或 JSON。
输入
基准
1rem 的参考大小。大多数浏览器默认为 16px。
每一级都是上一级乘以该比率的结果。
输出
显示值的小数位数。
输出
| 级别 | 大小 | 像素 |
|---|---|---|
| No data yet | ||
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/font-modular-scale-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseSize": "16",
"ratio": "1.25",
"customRatio": "1.25",
"unit": "rem",
"decimals": "3",
"exportFormat": "css"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `font-modular-scale-generator` tool (Font Modular Scale Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/font-modular-scale-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="字体模块化刻度生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
模块化刻度是一组字号序列，其中每一级都是前一级乘以一个固定比率的结果。与其手动挑选字号并希望它们看起来协调，不如选择一个基准字号和一个音乐式的比率，让每个标题、副标题和说明文字都落入比例协调、和谐统一的节奏中。本生成器会为你构建这个刻度，并提供可直接复制粘贴到 CSS、SCSS、Tailwind 或 JSON 中的代码。
使用方法
- 以像素为单位设置基准大小，即
1rem的参考值，通常为 16px。 - 选择比率。预设是经典的排版音程：从适合紧凑界面的小二度 (1.067)，到黄金比 (1.618) 和八度 (2.0)，后者适合强烈的编辑式对比。选择自定义可设置 1.01 到 3 之间的任意值。
- 选择输出单位（
rem、em或px），以及保留的小数位数。 - 选择导出格式。刻度表会实时更新，代码框中会给出可直接放入样式表或配置文件的代码块。
各级名称沿用熟悉的 Tailwind 命名约定：xs、sm、base、lg、xl、2xl … 直到 6xl。其中 base 为你选择的字号，每向上或向下一级，都会乘以（或除以）该比率。
应该使用哪个比率？
较小的比率 (1.067–1.2) 让字号彼此更接近，适合数据密集的仪表板和正文较多的页面。较大的比率 (1.333–1.618) 能形成醒目、清晰的层级，适合营销网站和长篇文章。如果拿不定主意，大三度 (1.25) 是可靠且通用的默认选择。
应该使用 rem、em 还是 px？
rem 是最利于无障碍访问的选择：字号会随用户的根字号偏好而缩放。em 相对于父元素计算，适合独立的组件。px 固定且可预测，但会忽略用户的缩放偏好，因此仅在确实需要精确尺寸时使用。
为什么基准大小始终是 1rem/1em？
因为相对单位是以基准值的倍数来表示的。在 base 这一级，数值正好是 1rem（或 1em）；像素列则显示它实际对应的具体大小。将单位切换为 px，即可把每一级都看作绝对像素值。
可以在 Tailwind 项目中使用吗？
可以。选择 Tailwind 配置 (fontSize) 格式，然后将生成的 fontSize 代码块粘贴到 tailwind.config.js 的 theme.extend 中。键名与 Tailwind 默认的字号名称一致，因此你现有的 text-lg、text-2xl 等工具类会改用新的刻度。
隐私
所有操作完全在你的浏览器中进行。基准大小、比率和生成的代码都不会离开你的设备，也从不会发送到服务器。