中文小说网页需优化字体、结构、夜间模式和滚动体验：指定衬线字体与line-height 1.85，用<article><p>语义化结构，HSL调色确保对比度≥7:1，优先滚动并用scroll-snap替代JS翻页。
小说网页最常卡在字体和行高上
浏览器默认的 font-family 和 line-height 会让正文像代码文档，不是阅读界面。中文小说必须显式指定衬线字体（如 "Noto Serif SC"、"KaiTi"），并把 line-height 设为 1.7–2.0 之间——低于 1.6 看着压抑，高于 2.2 行距松散，翻页时容易丢行。
常见错误是只写 font-size: 16px 就以为够了；其实字号只是起点，真正影响可读性的是字体族、行高、字间距三者配合。移动端还要加 font-size: clamp(14px, 4vw, 18px) 防止小屏缩得太小。
实操建议：
- 优先用系统自带中文字体栈：
font-family: "Noto Serif SC", "KaiTi", "SimKai", serif - 正文
line-height统一设为1.85，比纯数字更稳妥（避免继承放大） - 禁用
text-align: justify：中文两端对齐会拉大标点间距，造成“字阵列”感
章节内容容器别用 div 套 div
很多新手把每章包进一堆嵌套 div，结果样式冲突、JS 定位不准、打印/朗读模式识别失败。小说正文本质是语义化段落流，<article> + <p> 是最简且兼容性最好的结构。
立即学习“前端免费学习笔记（深入）”；
比如加载下一章时，如果用 document.querySelector('.chapter-content .content-box .text-wrapper') 这种路径选中，稍改个 class 就全崩；换成 document.querySelector('article chapter p') 或直接靠 data-chapter-id 属性定位，稳定得多。
实操建议：
- 每章用
<article data-chapter-id="327">包裹，标题用<h2>，段落一律用<p> - 避免给
p设固定宽高，用max-width: 62ch控制行长（ch单位比px或rem更适合文本流） - 段首不缩进？那就统一加
text-indent: 0，别依赖空格或
夜间模式不能只改 background-color
只切 body { background: #121212; color: #e0e0e0 } 是典型半吊子做法。问题在于：图片没反色、代码块背景仍亮、链接下划线在暗色里看不见、甚至某些字体在深底上发灰发虚。
更隐蔽的问题是 contrast ratio 不达标：#e0e0e0 在 #121212 上对比度只有 11.3:1，看似够了，但实际阅读中眼睛要不断重聚焦，尤其长段落后容易视疲劳。WCAG AA 级要求至少 4.5:1，但小说场景建议做到 7:1 以上。
实操建议：
- 用
@media (prefers-color-scheme: dark)做系统级响应，再加 JS 手动切换开关 - 关键颜色用 HSL 而非 HEX：比如文字色设为
color: hsl(0, 0%, 92%)，背景用background: hsl(240, 5%, 8%)，微调明度比硬换 HEX 更可控 - 所有图片加
picture+source media="(prefers-color-scheme: dark)"提供暗色适配版本
分页与滚动体验冲突时，优先保滚动
有人执着做“一页一屏”的翻页效果，结果在 iPad Safari 上滑动卡顿、返回时丢失位置、屏幕阅读器无法连续朗读。小说不是 PDF，用户真实行为是快速扫读、中途暂停、反复回看——滚动天然支持这些动作，分页反而制造障碍。
如果你真需要模拟纸质书翻页感，别用 JS 拦截 scroll，而是用 scroll-snap-type: y mandatory + scroll-snap-align: start 让浏览器原生处理，性能好、兼容 iOS/macOS、还能被辅助技术识别。
实操建议：
- 禁用
overflow: hidden和touch-action: none，它们是滚动卡顿元凶 - 用
scroll-padding-top配合固定导航栏，防止锚点跳转后标题被遮挡 - 加载新章节时，用
element.scrollIntoView({ behavior: 'smooth', block: 'start' })，别手动算 scrollTop
字体渲染、语义结构、色彩对比、滚动逻辑——这四块不动，光调 margin padding 没用。尤其注意 iOS 上 font-smooth 已废弃，得靠 -webkit-font-smoothing: antialiased 和字体栈组合来稳住显示效果。
