多音字打印模糊的根本原因是浏览器打印引擎对ruby渲染支持不一致且默认字体不适配点阵输出；须用显式line-height、固定字号、宋体优先、禁用web字体、确保rb与rt严格一一对应且为直接子节点。
多音字用标注后打印模糊怎么办
直接用ruby的渲染支持不一致，且默认字体未适配点阵输出。
打印时ruby注音被截断或错行
Chrome 和 Edge 在 PDF 打印中常把挤进汉字行高里，导致声调重叠、轻声缩放失效。这不是 CSS 写错了，而是打印引擎没把ruby当“独立排版单元”处理。
- 必须显式设置
ruby { line-height: 1.8; }，避免行高塌缩 -
rt不能依赖em单位缩放——打印时1em可能被解析为当前字号的 100%，失去相对性；改用font-size: 9pt;或10px - 禁用
ruby-position: under;（Safari/Chrome 新版虽支持，但打印时多数回退到over且不触发重绘） - 多音并列时，
rb和rt必须严格一一对应，中间不能有空格或换行符，否则打印引擎会丢弃部分rt
为什么@media print里加font-family没用
因为多数浏览器在打印预览阶段不加载 Web Font，而系统字体如“微软雅黑”在 PDF 导出时若未嵌入，就会 fallback 到 Courier 或 Times New Roman，拼音立刻糊成一片。
- 中文打印优先用
font-family: "SimSun", "Source Han Sans CN", sans-serif;——宋体在点阵输出下最稳，且 Windows/macOS/Linux 都自带 - 避免用
"Microsoft YaHei"，部分旧版 Chrome 打印时不识别该别名，直接跳过 - 不要给
rt单独设字体，统一由ruby继承，否则@page规则可能覆盖子元素字体链 - 加
body { -webkit-print-color-adjust: exact; color-adjust: exact; }确保声调颜色不被强制转灰度
动态生成多音注音时最容易漏掉的三件事
Vue/React 拼字符串或 innerHTML 注入ruby，看似跑得通，一打印就全乱：拼音错位、声调丢失、甚至整段不渲染。
-
rt必须是ruby的**直接子节点**，框架里插个或 Fragment 就会让语义失效，打印引擎直接忽略 - 服务端模板若未 HTML-escape 字符（如
&、），会导致rt变成孤立节点 - 不要用
v-html或dangerouslySetInnerHTML拼接，封装为原子组件，props 只传纯文本，内部用固定结构渲染
打印时真正起作用的，从来不是“能不能显示”，而是“能不能稳定输出”。多音字注音在屏幕上看着漂亮，不代表它经得起 A4 纸+激光打印机+PDF 中间层的三重校验。关键不是堆 CSS，而是让每个rb和rt都落在打印引擎能识别的语法边界上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
