移动端长文章阅读体验差主因是line-height和letter-spacing未配对：px单位导致渲染失真、继承失控、跨端差异；应改用无单位line-height和clamp()响应式letter-spacing，并兼顾中英文混排、OpenType特性及真机测试。
移动端长文章阅读体验差，90% 是因为 line-height 和 letter-spacing 没配对好——不是调得不够，而是单位、继承、响应逻辑全乱了。
为什么移动端用 px 设 line-height 和 letter-spacing 必翻车
固定像素值在不同屏幕密度下渲染失真：Retina 屏上文字“发虚”，小屏手机上 letter-spacing: 2px 直接撑爆容器导致换行错乱；line-height: 24px 在用户缩放字体时完全失效，子元素继承后行高突兀变大或变小。
-
line-height用px或%时，嵌套文本（比如段落里有<em></em>或<a></a>）会继承绝对值，字号一变，行框就塌或顶穿 padding -
letter-spacing用px时，iOS Safari 和旧版安卓 WebView 渲染差异极大，同一数值在 iPhone SE 和 Pixel 6 上视觉差距能到 30% - 设计稿给的 “1.2px 字距” 不能直接照搬——它没考虑视口宽度、系统字体缩放、OpenType 特性开关等真实变量
真正可用的响应式写法：用 clamp() 控制 letter-spacing，用无单位值稳住 line-height
现代浏览器（Chrome 94+、Safari 15.4+）支持 clamp()，它是目前唯一能兼顾窄屏不挤、宽屏不散、缩放不失真的方案。
-
letter-spacing: clamp(0.02em, 0.15vw, 0.08em);—— 最小值防超小屏粘连，最大值防 iPad 大屏拉空，中间用vw线性调节 -
line-height: 1.6;—— 必须用无单位数值，确保子元素按自身font-size重新计算，避免继承失控 - 中文长文务必加
word-break: keep-all;，否则letter-spacing可能触发非预期断行（如把“JavaScript”切成“Java”和“Script”）
中英文混排场景下容易被忽略的三个兼容点
思源黑体、Noto Sans CJK 等主流中文字体默认关闭 OpenType 字距特性，letter-spacing 一加，字与字之间就是硬塞空白，毫无节奏感。
立即学习“前端免费学习笔记（深入）”；
- 先开字距微调：
font-kerning: auto;或font-feature-settings: "kern";，再设letter-spacing: 0.01em（英文为主）或0（纯中文） - 禁用连字干扰：
font-feature-settings: "liga" 0, "clig" 0;，否则fi、fl连字断裂，汉字笔画间出现异常空隙 - iOS Safari 动态切换
letter-spacing有首帧闪动，若用 JS 切 class，建议加transform: translateZ(0)强制硬件加速，或改用 CSS 自定义属性 +transition
测试比理论重要：三台真机测一次，胜过十次模拟器调参
所有参数必须在真实设备上验证：iPhone SE（小屏高密）、Pixel 4（标准安卓）、iPad Air（大屏低密）。尤其注意两点：
- 系统设置里开启「更大字体」或「粗体文本」后，
line-height: 1.6是否仍保持呼吸感？letter-spacing是否随缩放自然缩放？ - 滚动过程中，iOS Safari 是否因
letter-spacing渲染延迟出现文字跳动？若有，降级为letter-spacing: 0.04em并加will-change: transform;
最麻烦的不是写错代码，而是把设计稿的静态数值当真理——真实世界里，line-height 和 letter-spacing 的交互效果，永远只在滚动、缩放、换行、连字、字体加载完成那一刻才真正显现。
