不喜欢广告？ 去 无广告 今天
字体模块化比例生成器
开发人员数学文本
广告 移除？
广告 移除？
指导
字体模块化比例生成器
字体模块化比例生成器基于单一基础尺寸和选定的数学比例构建完整的字体层级。音阶中的每一步都是前一步乘以该比例，因此标题、正文和小字号在所有屏幕尺寸上保持比例一致。
如何使用
- 设置 基础尺寸 以像素为单位（通常为 16px，等于 1rem）。
- 选择一个 比值 从下拉菜单中选择，或手动输入 自定义 并输入您自己的值。
- 选择输出 单元 (rem、em 或 px) 以及数量 小数位数.
- 选择一个 导出格式 —— CSS 变量、SCSS 变量、Tailwind 配置或 JSON。
- 编辑 样本 用于预览您自定义的文本在音阶每一步的渲染效果。
- 复制或下载生成的代码，并直接将其放入您的项目中。
特征
- 九个经典比例 —— 从小二度到八度，包括黄金比例（1.618）。
- 自定义比例输入 —— 输入 1.01 到 3 之间的任意值以创建专属音阶。
- 实时可视化预览 —— 查看从 xs 到 6xl 每一步的示例文本渲染效果。
- 四种导出格式 —— CSS 自定义属性、SCSS 变量、Tailwind 配置或 JSON。
fontSizerem、em 或 px - —— 选择与您的设计系统匹配的单位。 —— 将生成的值四舍五入到 0 至 5 位小数。
- 可调节精度 客户端数学运算
- —— 所有计算都在您的浏览器中运行，不会发送到服务器。 什么是模块化字体层级？
常问问题
-
模块化字体层级是一种基于单一基础尺寸和固定倍率构建的字体尺寸序列。每一步都是前一步乘以该倍率，从而在整个设计中保持尺寸之间的比例关系一致。
为什么使用数学比例而不是任意尺寸？
-
来自音乐理论和古典比例的比率——纯四度、纯五度、黄金比例——创造出眼睛感知为和谐的关系。任意尺寸往往显得不均衡，并在每个屏幕上迫使更多的视觉决策。
对于内容密集型页面，我应该选择哪个比例？
-
较小的比例，如小三度（1.2）和大三度（1.25），能保持标题尺寸接近正文，适用于文档、博客和内容密集型界面，读者大部分时间都在阅读段落。
对于营销和编辑布局，我应该选择哪个比例？
-
较大的比例，如纯五度（1.5）和黄金比例（1.618），会在正文和展示文本之间产生显著的尺寸跳跃。它们适用于首页、杂志和英雄区域，这些区域以字体为视觉焦点。
rem、em 和 px 单位之间的区别是什么？
-
px 是绝对像素尺寸。rem 相对于根字体尺寸，因此当用户更改浏览器默认设置时会自动缩放。em 相对于最近父元素的字体尺寸，这会使嵌套元素产生复合效果。大多数设计系统更倾向于使用 rem 作为全局字体层级，因为它尊重用户的可访问性设置。
快速的棕色狐狸跳过懒狗
