微信公众号不支持ruby标签，该标签会被完全过滤或转为空白；因后台HTML清洗机制仅保留基础标签，ruby不在白名单内，且CSS的display:ruby等属性也不被支持。
微信公众号不支持 ruby 标签
直接告诉你结论：ruby、rt、rp 这类用于注音的 HTML5 语义标签，在微信公众号图文编辑器中**会被完全过滤或转为空白**。你粘贴进去，保存后刷新，文字可能消失、错位，或被替换成无样式的纯文本段落。
为什么 ruby 在公众号里失效
微信后台的 HTML 清洗机制只保留极少数基础标签和内联样式属性。ruby 不在白名单内，属于“非标准排版标签”，和 details、mark、aside 一样，一进编辑器就被剥离。
- 即使你在浏览器里用开发者工具检查，看到的是
<ruby><rb>汉</rb><rt>hàn</rt></ruby>，发布后实际渲染的 DOM 里根本不存在这些节点 - 第三方编辑器（如秀米、135）导出的含
ruby的 HTML，也会在粘贴进公众号后台时被自动删掉整段 - 微信不解析
rt的定位逻辑，也不支持display: ruby这类 CSS 布局，所以连 hack 方案都走不通
替代方案：用 p + 内联 style 模拟注音效果
唯一可行的路径是放弃语义，手动构造视觉效果。核心原则：只用 p、strong、font，且所有样式必须写成单行内联、仅用微信允许的属性（font-size、color、line-height、vertical-align）。
例如想给“汉字”加拼音“hàn zì”，可写成：
立即学习“前端免费学习笔记（深入）”；
<p style="line-height: 1.2;"><font size="2" color="#999">hàn zì</font><br><font size="4">汉字</font></p>
-
line-height: 1.2控制两行间距，避免拼音和字离太远 -
font size="2"是微信能识别的字号缩放（不是 px），比正文小一号 - 必须用
<br>换行，不能用div或span包裹 - 别加
margin-top或position: relative—— 这些全被忽略
容易被忽略的兼容细节
很多人试过模拟注音但效果错乱，问题常出在三个地方：
- 用了
<center>或text-align: center却没套在p里 —— 微信只认<p style="text-align:center">，单独写<center>会被删 - 复制粘贴时带入了隐藏的 Unicode 字符（比如零宽空格），导致
<br>失效，两行叠在一起 - 在壹伴等插件的「源代码编辑」里调试成功，但发布前忘了点击「同步到编辑器」，结果发出去的还是旧版本
最稳妥的做法是：写完立即用壹伴的「手机预览」看真实渲染，重点检查 iOS 和安卓不同机型下拼音是否对齐、是否换行异常——这点比语法正确更重要。
