字体比例生成器
根据基础字号和比例生成模块化字号比例，并为移动端设置更小的比例。用你的字体预览，并导出 CSS、SCSS 或 Tailwind 字号。
免费 在浏览器中运行 无需注册
正在加载字体比例生成器…
您的文件绝不离开您的设备
如何使用字体比例生成器
- 1
在此页面打开字体比例生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
字号比例是一组按同一比例递增的字号，让标题、正文和说明文字彼此协调，而不是杂乱无章。这款字体比例生成器根据基础字号和比例计算出整套字号，用你选择的字体以真实文本预览，并将字号导出为代码。
如何创建字号比例
- 设置基础字号，正文通常为 16px。
- 选择一个比例，从小二度（1.067）到纯五度（1.5）、黄金比例（1.618）乃至更大。
- 设置向上级数（标题）和向下级数（小字）。
- 设置较小的移动端比例，避免标题在小屏幕上显得过大。
- 选择字体并输入示例文本进行预览，然后复制 CSS、SCSS 或 Tailwind 代码。
如何选择比例
| 比例 | 名称 | 效果 |
|---|---|---|
| 1.125 | 大二度 | 细腻，适合信息密集的应用 |
| 1.2 | 小三度 | 均衡，网站常用 |
| 1.25 | 大三度 | 层级清晰，适合博客 |
| 1.333 | 纯四度 | 标题醒目 |
| 1.5 至 1.618 | 纯五度、黄金比例 | 张力强，适合落地页 |
以 16px 和 1.25 为例
12.8px、16px、20px、25px、31.25px、39.06px、48.83px。每个字号都是前一个字号乘以 1.25。
小贴士
- 移动端使用更温和的比例，例如手机用 1.2，桌面用 1.333。
- 在最终的设计令牌中对字号取整到整数或半像素。
- 字号要搭配行高：正文约 1.5，大标题 1.1 至 1.25。
- 在 CSS 中使用 rem 单位，让文字遵循用户浏览器的字号设置。
常见问题
什么是模块化字号比例？
一组字号，其中每个字号都是前一个字号乘以同一比例，从而形成一致的视觉节奏。
基础字号应该用多少？
16px 是浏览器默认值，也是大多数网站正文的良好基础。
哪个比例最好？
没有唯一最好的比例。1.2 或 1.25 适合大多数网站；1.125 适合信息密集的界面；1.333 及以上能带来张力十足的标题。
为什么移动端要用不同的比例？
较大的比例会让标题在小屏幕上变得巨大。较小的移动端比例既保留层级，又能适应屏幕。
可以导出到 Tailwind 吗？
可以。选择 Tailwind 格式即可得到包含你的字号比例的 fontSize 配置。
字号应该用 px 还是 rem？
CSS 中推荐使用 rem，因为它会随用户的浏览器设置缩放。工具可以提供用作 rem 的数值。