HTML中无专用字幕标签，需用/配合CSS实现；font-size与line-height须配对调整，推荐无单位数值如1.4；中文标题line-height宜1.15–1.3，正文1.5–1.7；letter-spacing建议0.06em–0.1em提升可读性。
HTML 里没有真正的“字幕标签”
别被 <caption></caption> 或 <track></track> 搞混了——它们不是用来显示滚动字幕或标题文字的。浏览器原生字幕（如视频 <track></track>）样式几乎不可控，<caption></caption> 仅用于表格标题，且默认样式极简、无行高控制能力。真要实现可调大小和行距的“字幕效果”，你得用 <div>、<code><p></p> 或 <span></span> 配合 CSS，而不是依赖某个“字幕专用标签”。
font-size 和 line-height 必须配对改
只改 font-size 是最常见翻车点：文字变大后，若 line-height 还是默认值（比如 line-height: 1.2），中文常显拥挤；若设成固定像素（如 line-height: 24px），换设备或缩放时立刻错位。
- ✅ 优先用无单位数值：
line-height: 1.4—— 它会自动乘以当前font-size，比例恒定 - ✅ 中文标题推荐
line-height: 1.15–1.3，正文段落用1.5–1.7 - ❌ 避免
line-height: 120%：百分比值继承的是计算后的绝对值，子元素换字号后不重算 - ⚠️ 注意
<video></video>内嵌字幕（<track kind="subtitles"></track>）无法直接套 CSS，需用::cue伪元素，且兼容性有限（Safari 支持弱）
letter-spacing 对中文字幕很关键
大号字幕容易“糊成一片”，尤其在移动端屏幕小、字体渲染精度低时。letter-spacing 不是可有可无的装饰，而是提升可读性的刚需。
- 中文标题建议加
letter-spacing: 0.06em–0.1em（em相对于当前字号，缩放安全） - 避免用
px值，否则字号一变，字间距就失衡 - 慎用负值：
letter-spacing: -0.02em可微调过松的英文，但中文基本不用，易导致笔画粘连 - 搭配
text-rendering: optimizeLegibility能缓解西文字母放大后的发虚问题
响应式字幕必须约束容器宽度
大字号 + 无宽度限制 = 移动端溢出、换行错乱、行高塌陷。这不是行距没调好，是布局失控。
立即学习“前端免费学习笔记（深入）”；
- 给字幕容器加
max-width: 100%和overflow-wrap: break-word - 用
rem设font-size（如font-size: 1.8rem），并确保根元素有明确基准（font-size: 16px） - 如果字幕需居中且垂直居中，别靠
margin-top硬推，改用display: flex; align-items: center; justify-content: center - 调试时重点看 computed 值：
font-size是否如预期？line-height是不是按倍数算出来的？父级有没有意外设置font-size扰乱继承？
