这技术可把大家高兴坏了，浏览器现在直接支持带声调的拼音标注，把后端渲染的那一套彻底省了。随便点开微博搜一下，就能发现早在 HTML 标准里藏着个 标签。今天咱们把它翻出来，也就是几分钟的事儿，汉字立马就能“开口说话”。 最省事的玩法就一个字：极简。整整13个字符就能搞定！把这段代码扔到 Chrome 里一跑，虽然屏幕上还是平平无奇的“拼音”二字，但 <ruby> 的架子早就搭好了——只要补上声调，汉字立马变成“注音版”。 想让拼音带声调？还得靠子标签立功。在这行代码里加个 <rt> 子标签就行： 刷新页面看效果： 注意啦，这里写的“pinyin”只是普通的拼音字母，真正的声调还得靠输入法配合才能显示出来。 搜狗输入法是个好帮手。点右键呼出软键盘，选“拼音字母”，你就能看到带声调的 a、o、e、i、u、ü。照着敲下“diāochóngxiǎojì”，把它复制进 <rt> 标签里去。 最终的代码就长这样： 渲染出来就是开头那张图——汉字跟声调一一对应，就像给每个字都配了“小耳机”。 根据 MDN 的数据来看，Chrome、Edge、Firefox 还有 Safari（无论是 iOS 还是 macOS 版）全都原生支持 <ruby>。 你要是觉得拼音和汉字对不齐是个烦恼？其实是声调长度不一样惹的祸。终极解法也很简单：把每个汉字单独包进一个 <ruby>，做到一字一拼。 像这样： 这样每个汉字都单独成了一个“音节块”，长度一致自然就对齐了。 到这儿为止，带声调的拼音标注算是彻底玩明白了。不需要后台程序、也不用安装插件，只要一行 HTML 代码就能立马上线！