CSS行高计算器
在线CSS行高计算器，支持字号、行高比例与基准网格联动计算，提供实时排版预览、常用字号对照和CSS代码复制。
已就绪，修改参数后会实时计算。
计算设置
计算结果
行高: 24px
对齐网格: 3行
实际比例: 1.50
预览
文字预览
这是一段示例文字，用于展示行高效果。行高会直接影响阅读舒适度，合适的值能让文字更容易扫读和理解。
第二段文字继续展示垂直节奏。行高与字号、段间距、网格系统协同后，页面会更整齐，层级也更清晰。
网格对齐 (每格8px)
文字尽量落在统一垂直基线上，标题、正文、列表等模块在长页面中会保持稳定节奏。
line-height: 24px;常用字号行高对照表
| 字号 | 紧凑 (1.2) | 标准 (1.4) | 舒适 (1.5) | 宽松 (1.6) |
|---|
工具说明
CSS行高计算器用于快速计算可读性更好的 line-height，并将结果对齐到基准网格，帮助你在网页排版和组件开发中建立稳定的垂直节奏。
什么是 Line Height
Line Height（行高）是 CSS 中控制文本行间距的属性。它决定段落的疏密程度，直接影响阅读效率、视觉层级和页面整体节奏。
核心功能
- 支持字号、行高比例、基准网格联动计算，并自动取整到网格单位。
- 支持常用比例预设（1.2、1.4、1.5、1.6），快速切换排版密度。
- 支持实时文本与网格预览，可直观看到对齐效果。
- 支持常用字号对照表和一键复制 CSS 行高代码。
使用步骤
- 输入字号、行高比例和基准网格值，工具会实时计算推荐行高。
- 点击比例预设按钮，快速对比不同阅读密度。
- 观察文字预览与网格预览，确认排版节奏是否满足页面需求。
- 复制生成的 line-height 代码，直接应用到样式文件。
常见问题
正文推荐比例是多少？
多数界面正文可从 1.5 起步，再根据字重、字族与版面密度微调到 1.4 或 1.6。
为什么要对齐基准网格？
网格对齐能让段落、标题和组件留白更统一，在长页面与多语言界面中更容易保持一致性。
行高应该用 px 还是无单位？
通用样式系统常用无单位比例；若需要严格网格对齐和视觉验收，px 值更便于落地。
隐私说明
本工具不会上传输入内容或计算结果，所有行高计算、预览和代码生成都在浏览器本地完成。