可访问性字体设计的核心是交出控制权：用rem或16px基准值、无单位line-height: 1.6、分层font-family兜底，确保用户系统设置生效，避免px硬编码导致高对比度/缩放失效。
可访问性字体大小的核心是放弃绝对控制，让浏览器和用户说了算——rem 是底线，16px 是起点，line-height: 1.6 是呼吸感的锚点。
为什么不能全局用 px 设字体大小
硬写 font-size: 14px 或 16px 看似稳妥，但会直接覆盖用户在系统或浏览器里设置的“更大文字”偏好。视力障碍用户调高系统字号后，你的页面文字仍卡死在 14px，等于关掉了他们的放大开关。更隐蔽的问题是：Windows 高对比度模式下，px 值常被强制重绘为模糊位图；iOS Safari 对小于 16px 的文本自动缩放，反而导致排版错乱、点击区域偏移。
实操建议：
- 根元素
html不要设font-size（除非你在做整套响应式缩放体系） - 正文段落统一用
p { font-size: 16px; line-height: 1.6; }——这是浏览器默认值，也是多数可读性测试的基准线 - 标题用相对单位：
h2 { font-size: 1.5em; }或无单位倍数：font-size: 1.5;，保持与父级的比例关系
rem 和 em 到底怎么选
rem 相对于根元素 html 的 font-size，适合全局控制；em 相对于直接父元素，适合局部缩放（比如按钮内图标随文字变大）。混用容易失控：比如 html { font-size: 10px; } + body { font-size: 1.6rem; } + h2 { font-size: 1.5em; }，最终字号是 10 × 1.6 × 1.5 = 24px，但调试时根本看不出哪一层动了。
实操建议：
- 正文字体一律用
rem或直接px（16px是安全值），避免嵌套计算 - 组件内部缩放用
em，例如按钮内的icon尺寸设为font-size: 0.875em，它会随按钮文字大小同步变化 - 慎用
%和vw做正文字号：前者依赖父级，后者在小屏上可能缩到难以识别（2vw在 320px 屏幕上仅 6.4px）
line-height 不是装饰值，是垂直节奏的命脉
写 line-height: 24px 这种固定像素值，等于把行高钉死。一旦父级字号从 16px 改成 18px，行高不会跟着变，文字立刻挤在一起。而 line-height: 1.6 是无单位倍数，它始终是当前字号的 1.6 倍，这才是真正的弹性。
实操建议：
- 所有块级文本容器（
p、li、blockquote）必须显式设line-height，别依赖浏览器默认 -
1.6是经过 Baymard 等机构热图验证的平衡点：比1.5多出的间隙能防止中文「一」和「十」上下粘连，又比1.7更紧凑，避免小屏截断 - 卡片类短文本可微调至
1.5，但必须同步确保margin-bottom ≥ 0.8rem，否则视觉密度失衡
中英混排时最容易被忽略的细节
中文没有 x-height 概念，英文小写字母却高度参差。当 font-family 堆叠链断裂（比如 macOS 字体在 Windows 上不可用），备用字体的基线对齐可能错位，导致同一行里汉字“浮”在英文上方。这不是 bug，是字体度量差异的必然结果。
实操建议：
- 字体堆叠必须分层兜底：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; - 避免只写
"Helvetica Neue"这类单字体名——它在 Linux 或旧 Android 上大概率 fallback 到丑陋的位图字体 - 用
text-rendering: optimizeLegibility;启用高级字距调整，对英文单词和数字间距改善明显
真正难的不是写对 rem，而是接受你无法控制最终渲染尺寸。可访问性不是加功能，是交出控制权——把字号决定权还给用户，把行高弹性交给无单位值，把字体兜底写进每一层声明里。漏掉任何一环，都可能让某个真实的人读不下去你的页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
