字体单位

CSS 长度单位分为绝对与相对两类。排版与布局中，字号与间距优先使用相对单位（rem、em、%），更利于响应式与用户放大字号；边框、细线等可用 px。与排版属性的配合见 排版与文本。

绝对长度单位

主要用于印刷（@media print）或需要固定物理尺寸的场景。

关于 px 与无障碍

MDN 建议：避免仅用 px 定义字号，因为部分用户依赖浏览器「最小字号」或默认字号放大；rem / % 相对根字号更易配合无障碍设置。页面整体缩放仍会放大 px 布局，但字号策略上更推荐 rem。

相对长度单位

相对于字体：em / rem / ch / lh

em 复合示例：父 font-size: 1.2em，子再 1.2em → 相对祖父约为 1.44em。

rem 示例：html { font-size: 100%; }（通常 16px）时，1.25rem ≈ 20px。

font-size: 62.5% 技巧：使 1rem ≈ 10px（在默认 16px 下）。现较少推荐：改变根字号比例可能影响用户默认字号预期；更常见是保持 100% 并用 1.125rem 等小数字。

相对于视口：vw / vh / vmin / vmax / vi / vb

动态视口单位（移动端全屏）

全屏区块常用 min-height: 100dvh 替代 100vh，减少地址栏收起前后高度跳动；支持度见 MDN length · 视口百分比。

百分比 %

用于 font-size 时，相对于父元素的 font-size（行为类似 em）。

对比：px vs em vs rem

流式字号：clamp()

结合 rem 与 vw 限制最小/最大字号：

h1 {
    font-size: clamp(1.25rem, 2.5vw + 1rem, 2rem);
}

代码示例

html {
    font-size: 100%; /* 尊重用户默认，通常 16px */
}

body {
    font-size: 1rem;
    line-height: 1.5; /* 无单位：1.5 × 自身 font-size */
}

.card {
    border: 1px solid #ccc; /* 细线用 px */
    padding: 1.5rem;
}

.btn {
    font-size: 1rem;
    padding: 0.5em 1em; /* em 相对 .btn 的 font-size */
}

.title {
    font-size: 1.5rem;
    max-width: 40ch; /* 约 40 个字符宽 */
}

总结

• 全局字号与间距：优先 rem；组件内部随字号缩放：em。
• 边框、1px 分隔线：px。
• 标题响应式：clamp() + rem/vw。
• 避免为正文单独写死 px 字号；根元素宜用 % 而非随意改小 62.5%。

参考文献

以下链接在编写时均可正常访问：