排版
排版比例生成器
为设计系统和 CSS 生成比例排版比例
比例预览
xs
9px / 0.5628rem
The quick brown fox
sm
12px / 0.7502rem
The quick brown fox
base
16px / 1rem
The quick brown fox
lg
21.33px / 1.333rem
The quick brown fox
xl
28.43px / 1.7769rem
The quick brown fox
2xl
37.9px / 2.3686rem
The quick brown fox
3xl
50.52px / 3.1573rem
The quick brown fox
4xl
67.34px / 4.2087rem
The quick brown fox
5xl
89.76px / 5.6102rem
The quick brown fox
6xl
119.66px / 7.4784rem
The quick brown fox
代码
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}FAQ
常见问题
关于排版和模块比例的一切
什么是排版比例？
排版比例是通过固定比率按比例相互关联的一组文字大小。使用一致的比例可在设计中创造视觉和谐，因为每个大小在数学上与其他大小相关。
如何使用 CSS 输出？
将 CSS 变量复制到全局样式文件（例如 `app.css`）。然后使用 `font-size: var(--text-lg)` 调用它们。对于 Tailwind，将配置粘贴到 `tailwind.config.js` 的 `fontSize` 块中。