ruby注音错位是因字体基线差异导致的正常现象，需用vertical-align、line-height控制对齐，禁用transform缩放，响应式下用clamp统一缩放注音，并预处理长拼音。
ruby标签在大字号标题里文字错位
ruby本身不参与行高计算，但当父元素font-size拉到 3rem 以上时，rb（汉字）和rt（注音）会因字体度量差异出现垂直偏移——不是 bug，是浏览器按各自字体的 ascent/descent 基线对齐导致的。常见现象：注音飘在字顶上方、或沉到字底以下，尤其在 PingFang SC + Noto Sans CJK 混用时更明显。
- 别依赖默认
line-height：大标题常设line-height: 1.1压缩行距，但rt仍按完整行高定位，结果被“挤出”可视区 - 禁用
vertical-align: baseline（rt默认值），改用vertical-align: text-top或vertical-align: super手动卡位 - 给
ruby加display: inline-block再设line-height: 1，可切断继承干扰，让rt只认自身尺寸 - 若用 vw/vh 做响应式标题，注音大小必须同步缩放：
rt { font-size: 0.35em; }比固定12px更稳，避免小屏下注音糊成一团
大标题中 ruby 注音模糊或发虚
Safari 和部分 Android WebView 对小字号注音（≤14px）默认启用亚像素抗锯齿，反而让拼音边缘毛糙。这不是渲染失败，是字体平滑策略冲突。
- 全局删掉
text-rendering: optimizeLegibility，换成text-rendering: geometricPrecision - 对
rt单独加-webkit-font-smoothing: subpixel-antialiased（仅 Safari 生效），iOS 上能立刻变锐利 - 中文字体链里避开
sans-serif这种泛型名，硬写"PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei"，确保注音走同一字体引擎 - 别用
transform: scale(0.8)压小注音——会触发重采样，比直接调font-size更糊
ruby 在 transform 缩放的大屏标题里变形
用transform: scale(1.3)放大整个标题容器时，ruby里的rt会被双重缩放：一次是 CSS transform，一次是字体自身的 hinting 行为，导致注音位置漂移、字宽比例失真。
- 把
ruby从缩放容器里抽出来，用绝对定位+transform: translate()手动对齐，避开嵌套缩放 - 若必须保结构，给
ruby加transform: scale(1)强制重置，再用transform-origin: center top微调锚点 - 注音内容动态更新后（比如切换方言读音），要触发重排：
ruby.offsetHeight读一下再改，否则 Safari 可能沿用旧的 layout cache - 慎用
will-change: transform在ruby上——GPU 图层提升反而加剧基线错乱，只在父容器加即可
响应式标题中 ruby 注音断行或截断
当标题用clamp(2rem, 4vw, 3.5rem)自适应时，注音可能在中屏断成两行，或超长拼音被overflow: hidden切掉——因为rt默认是white-space: normal，且不继承父级的nowrap。
- 给
ruby设white-space: nowrap，阻止注音内部换行 -
rt加font-size: clamp(0.25rem, 2.2vw, 0.6rem)，确保注音始终是汉字的 25%–35%，不会撑破容器 - 如果注音过长（如“yīn wèi suǒ yǐ”），前端需预处理截断逻辑，后端传来的拼音字段得带长度提示，不能等 CSS 裁
- 用
@supports (font-feature-settings: "liga")检测，对支持连字的字体开启font-feature-settings: "liga"，让“sh”“ch”这类双字母更紧凑
rt的top值调 0.5px 就偏了，得靠vertical-align + line-height组合拳钉死。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
