阅读模式下应通过根元素 font-size 配合 rem 单位实现字号自适应，避免内联固定 px 值、禁用 text-size-adjust:none，并保持语义纯净与系统级可访问性适配。
阅读模式下提供自定义字号，核心不是改 <p> 标签本身，而是让段落文字能响应用户主动调整的字号设置——这依赖于可访问性支持、相对单位和动态样式机制。
用 rem 或 em 单位打基础
浏览器阅读模式（如 Safari 的“阅读器视图”或 Edge 的“阅读模式”）通常会忽略页面内联样式，但尊重根元素或 body 的字体设定。因此：
- 在
<html>上设font-size: 16px或更灵活的font-size: clamp(14px, 1.25vw, 18px)，所有<p>用font-size: 1rem就能随根字号缩放 - 避免在
<p>上硬写font-size: 16px，否则阅读模式可能锁定该值，无法响应系统放大 - 若需层级差异，比如正文
1rem、引文0.95rem，仍保持相对性，便于统一缩放
配合系统字号与辅助技术
现代阅读体验依赖操作系统级设置（如 Windows “放大文本”、macOS “显示缩放”、iOS “更大字体”），网页需主动适配：
- 不重置
body的font-size为固定 px 值，改用font-size: 100%或1rem，让它继承系统默认（通常为 16px） - 禁用
text-size-adjust: none—— 这个 CSS 属性会阻止移动端自动适配用户字号偏好，务必移除或设为auto -
<p>内容保持语义纯净，不包裹无意义的<span>或冗余 class，减少阅读模式解析干扰
提供手动字号切换控件（可选增强）
若需显式字号调节按钮（如 A+ / A−），本质是动态修改根字号：
立即学习“前端免费学习笔记（深入）”；
- JavaScript 监听按钮点击，修改
document.documentElement.style.fontSize - 例如：点击“增大”时执行
document.documentElement.style.fontSize = '20px'，所有 rem 单位段落自动变大 - 把当前字号存入
localStorage，刷新后还原；同时监听prefers-reduced-motion等媒体查询做降级处理
避开已淘汰方式
别用过时方案干扰阅读模式识别：
- 彻底弃用
<font size="+1">或<big>/<small>标签——它们语义模糊，多数阅读器直接忽略或渲染异常 - 避免仅靠内联
style="font-size:18px"控制段落，这类样式易被阅读模式剥离 - 不依赖
zoom或transform: scale()放大文字，会导致布局错乱、行高失衡，阅读器通常不兼容
