4xlThe quick brown fox61.04px
3xlThe quick brown fox48.83px
2xlThe quick brown fox39.06px
xlThe quick brown fox31.25px
lgThe quick brown fox25px
mdThe quick brown fox20px
baseThe quick brown fox16px
smThe quick brown fox12.8px
xsThe quick brown fox10.24px
| ステップ | サイズ (px) | サイズ (rem) |
|---|---|---|
| xs | 10.24 | 0.640 |
| sm | 12.8 | 0.800 |
| base | 16 | 1.000 |
| md | 20 | 1.250 |
| lg | 25 | 1.563 |
| xl | 31.25 | 1.953 |
| 2xl | 39.06 | 2.441 |
| 3xl | 48.83 | 3.052 |
| 4xl | 61.04 | 3.815 |
:root {
--text-xs: 0.640rem;
--text-sm: 0.800rem;
--text-base: 1.000rem;
--text-md: 1.250rem;
--text-lg: 1.563rem;
--text-xl: 1.953rem;
--text-2xl: 2.441rem;
--text-3xl: 3.052rem;
--text-4xl: 3.815rem;
}工具说明
输入基础字号和比例（如 1.25、黄金比例 1.618），自动生成 xs 到 5xl 的字体大小阶梯，并生成对应的 CSS 变量代码。
typographyfontscale字体排版cssrem