字体尺寸比例生成器 使用可自定义的基本大小、比率和单位来生成模块化的字体尺寸比例。
字体尺寸比例生成器
使用可自定义的基本大小、比率和单位来生成模块化的字体尺寸比例。
设置基准大小和比例
选择基本字体大小和数学进制比率，用于创建等级顺序。
配置输出
选择单位（px、rem、em）、行高和刻度步数。
复制CSS代码
预览字体大小阶梯并复制自定义的CSS属性。
What Is 字体尺寸比例生成器?
字体尺寸生成器根据数学比例（也称为模块化比例）创建了一套和谐的字体大小。统一的排版对于良好的设计至关重要，模块化比例提供了通过数学比例自然相关的字体大小。本工具提供八种经典的比例：小二度（1.067）、大二度（1.125）、小三度（1.200）、大三度（1.250）、完全四度（1.333）、增四度（1.414）、完全五度（1.500）和黄金比例（1.618）。从基本大小开始，每一步都乘以所选的比例。输出包括您首选单位中的命名CSS自定义属性（--font-size-xs至--font-size-5xl），以及显示每个大小的样本文本的可视化预览。
Why Use 字体尺寸比例生成器?
-
来自音乐和设计理论的八种经典数学比例
-
支持px、rem或em单位，适用于不同项目需求
-
可调节基准大小、行高和步数
-
输出CSS自定义属性，便于集成
Common Use Cases
设计系统字体排版
建立一致的字体等级顺序作为设计系统的基础。
新项目设置
在开始新的Web项目时生成和谐的字体大小。
博客和文章样式
为长篇内容创建可读的排版等级顺序。
响应式字体排版
生成可用于不同响应式断点的比例值。
Technical Guide
模块化字体比例使用数学比例生成一系列成比例的值。从基本大小开始（通常为网页的16px），每一步都是通过乘以该比例来计算的。对于大三度（1.25）比例，基本大小为16px：12.8px、16px、20px、25px、31.25px、39.06px。比率决定了大小之间的对比--较小的比率（1.067、1.125）创建适合正文文字的微妙差异，而较大的比率（1.5、1.618）创建适合显示排版的戏剧性差异。流行的比率来自音乐理论（小三度、完全四度、完全五度）和数学（黄金比例）。对于网页实现，定义大小为CSS自定义属性，并在整个样式表中使用它们。rem单位因其尊重用户的字体大小首选项而被认为是可访问的。行高通常应该随着字体大小的增加而减少--正文文字为1.5，大标题为1.1-1.2。
Tips & Best Practices
-
1对于大多数Web项目，使用大三度（1.25）或完全四度（1.333）
-
2使用rem单位以实现无障碍和用户首选项的字体排版
-
3减少行高以适应较大的标题（1.1-1.2），增加行高以适应正文（1.5-1.7）
-
4坚持使用5-7个刻度步数，以保持可管理的排版等级顺序
Related Tools
Frequently Asked Questions
Q 什么是模块化比例？
Q 我应该选择哪种比例？
Q 我应该使用px还是rem？
Q 我需要多少个刻度步数？
Q 是否可以为移动设备和桌面使用不同的比例？
About This Tool
字体尺寸比例生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.