前端文字实现拼音标注

示例地址

• https://github.com/superBiuBiuMan/duyi_study

使用ruby标签

• 使用ruby标签进行标注

<ruby>
	汉
	<rt>hàn</rt>
</ruby>

• 当遇到不兼容此标签的时候,可以添加一个rp标签,正确情况下是不显示rp标签的

<ruby>
汉
    <rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
</ruby>

使用拼音库

• https://pinyin.js.org/
• https://www.npmjs.com/package/pinyin
• 安装

npm install pinyin@alpha --save

• 使用看官网
• 示例

import pinyin from "pinyin/lib/pinyin-web";
pinyin('你')

• 效果