16px配line-height:1.6最易读，因它是浏览器默认字号，兼顾小屏识别与窄屏换行，且经可读性测试验证为行距平衡点，中英混排更友好。
网页正文用 font-size: 16px + line-height: 1.6 最易读，不是越大越清楚，也不是所有设备都认 rem。
为什么是 16px 而不是 14px 或 18px
16px 是多数桌面浏览器的默认基础字号，既避开小屏上 14px 的识别疲劳，又防止 18px 在窄容器里频繁换行。移动端 Safari 和 Chrome 对 font-size 小于 16px 的文本会强制放大（防误触），反而破坏排版节奏。实测中，16px 配合 line-height: 1.6（即 25.6px 行高）能保证字母 ascender/descender 有足够呼吸空间，尤其对中文混排的英文单词、数字、标点更友好。
常见错误现象：
- 设
font-size: 14px后文字发虚、阅读吃力，尤其在 Windows 清晰度调低时 - 用
font-size: 100%依赖用户浏览器设置，结果在某些定制系统里缩到 12px - 全局设
font-size: 18px，导致卡片内两行标题挤在一起，line-height没同步调大
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 根元素
html不要设font-size（除非你真在做响应式缩放体系） - 正文段落统一用
p { font-size: 16px; line-height: 1.6; } - 标题用
em或无单位倍数：比如h2 { font-size: 1.5em; line-height: 1.4; }，保持比例关系 - 避免用
px写标题字号后，再用rem写段落——单位混用会让调试变混乱
line-height 设成 1.6 而不是 1.5 或 1.7 的实际影响
line-height 是垂直节奏的锚点，不是装饰值。1.6 是经过大量可读性测试（如 Baymard Institute 页面扫描热图）验证的平衡点：比 1.5 多出 0.1 倍字体大小的间隙，刚好能区分相邻行；比 1.7 少 0.1，避免段落在小屏幕被截断或留白过空。
使用场景差异：
- 纯中文长文（如博客正文）：1.6 稳定，1.5 容易让「一」和「十」上下粘连
- 中英混排技术文档：1.6 可缓解英文小写字母 x-height 与汉字基线不齐的问题
- 卡片摘要类短文本（
.card p）：可微调至1.5，节省高度，但必须确保margin-bottom不小于0.8rem
容易踩的坑：
- 写
line-height: 24px这种固定像素值——当父级字号变化时，行高不会缩放，造成错位 - 只给
p设line-height，忘了ul、ol、blockquote也需一致处理 - 在 Flex 容器里对齐文字时，误以为
align-items: center能替代合理line-height，结果跨行文本上下偏移
font-family 堆叠顺序怎么写才真正“兜底”
别信“一套字体走天下”的模板写法。真实环境里，Windows 没装 macOS 字体，Linux 默认没思源黑体，Android WebView 甚至可能忽略第二层字体名。有效堆叠必须按系统覆盖率从高到低排，且每层带明确 fallback。
实操建议（直接可用）：
- 中文优先场景：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; - 英文为主+少量中文：
font-family: "Inter", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; - 绝对不要写
"PingFang SC", "Helvetica Neue"单独放在前面——前者仅限 macOS/iOS，后者已淘汰多年 - 避免用引号包单个英文单词（如
"Arial"），CSS 解析器在某些旧 Android 版本会报错
性能提示：字体名不含空格时（如 system-ui）无需引号；含空格或特殊字符（如 "Noto Sans"）必须加引号，否则整个声明失效。
text-align 和字间距的隐藏风险
text-align: justify 看起来整齐，但在中文里几乎没意义——汉字天然“两端对齐”，强行 justify 会导致标点悬挂、词间空隙异常，反而干扰阅读节奏。而 letter-spacing 更危险：设成正数会让中文变稀疏、英文单词断裂；设负数则可能让连字符（如 email 中的 @）和前后字符粘连。
正确做法：
- 正文一律用
text-align: left（LTR 语言默认），靠max-width和左右 margin 控制宽度，比 justify 更可控 - 标题可谨慎用
letter-spacing: 0.02em提升辨识度，但必须配合font-weight: 500以上，否则显得轻飘 - 代码块、数据表格等场景，用
font-family: monospace+letter-spacing: 0保真，别加任何额外间距 - 千万别在
body上设全局letter-spacing——按钮文字、下拉选项、表单 placeholder 全都会变形
最常被忽略的一点：iOS Safari 对 text-align: justify 的实现有渲染延迟，滚动时会出现文字重排闪烁，且无法通过 will-change 优化。它不是“不够好”，而是根本不该出现在正文里。
