# 【开发者自荐】汉语拼音注音小工具，单网页，纯离线

**URL:** <https://meta.appinn.net/t/topic/91955>\
**Category:** 发现频道\
**Tags:** appinned, web\
**Created:** [2026 年9 月 17 日 03:56 UTC](https://meta.appinn.net/t/topic/91955 "2026-09-17T03:56:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 17 日 03:56 UTC](https://meta.appinn.net/t/topic/91955/1 "2026-09-17T03:56:47Z")

</div>

## **软件名称**

汉语拼音注音小助手（pinyin-annotator）

## **应用平台**

- Windows / macOS / Linux / Android / iOS（纯网页，有浏览器就能用）

- 单文件 HTML，双击离线可用，也可部署到自己的服务器

## **推荐类型**

【开发者自荐】

## **是否收费**

免费，MIT 开源

## **一句简介**

把文章一键转成汉字上方带拼音的注音读物，专为幼儿园到小学低年级的孩子做朗读材料，纯本地运行。

## **应用简介**

起因是昨天论坛里[坛友在求拼音注音工具](https://meta.appinn.net/t/topic/91913/10)，正好家里娃也需要：网上能找到的注音文章不多，想自己给文章加拼音，试了几个在线工具，要么转出来「一」「不」变调全错，要么「豆子」「高兴地」这种轻声标成重读，要么要需要担心文章内容被传到服务器，要么“的地得”，儿化音，各种混乱，还不好手动改。

于是自己（和AI）一起搓了一个，主要是加了这些特性：

1. **一键注音** ：粘贴文章（或导入 TXT，自动识别 UTF-8 / GBK 编码），汉字上方即时生成拼音，教材式 ruby 排版，默认楷体大字号大行距；
2. **注音细节按教材习惯来** ：「一 / 不」按实际读音标变调（一个 → yí gè，可切换回标原调）、「妈妈」「豆子」「高兴地」等轻声自动不标调、「的地得着」按助词读 de / zhe——拼音引擎用的是 pinyin-pro（官方基准准确率 99.846%）；
3. **儿化音两种模式** ：逐字注音（花儿 huā er，适合指读认字）和标准拼音（花儿 huār，符合汉语拼音方案），自动判断不准时（比如人名「可儿」「润儿」），点一下「儿」字就能强制指定儿化或非儿化；
4. **手动改读音** ：点任意生字弹出候选读音（多音字的全部读音 + 轻声），改过的字标橙色，随时可恢复默认；
5. **易错点高亮** ：一键给多音字、的地得、一/不、儿化候选、常见轻声字加底纹，打印出来用笔快速核对一遍就放心了；
6. **排版完全可调** ：汉字 16–48px、楷体 / 宋体 / 黑体，拼音字体独立设置，字间距 / 行间距 / 段间距滑杆实时调（长拼音黏连问题靠字间距解决）；
7. **长文不怕卡** ：默认翻页模式（300–1500 字/页），也支持连续滚动（上限 2 万字防浏览器卡死）；
8. **打印 / 导出 PDF** ：自动隐藏编辑区只出注音页，页脚版权水印可勾选去掉；
9. **阅读模式** ：一键隐藏所有编辑控件，方向键翻页，把设备直接递给小朋友；
10. **复制三种格式** ：富文本（直接粘进 Word 保留注音排版）、HTML ruby 标签（`<ruby>中国<rt>zhōng guó</rt></ruby>`）、字「拼音」逐字对照；
11. **隐私** ：纯前端，文章内容全程在浏览器里处理，不上传任何服务器；
12. **离线 + 引擎可升级** ：单文件 HTML 内嵌拼音引擎，断网双击就能用；同时支持联网同步 pinyin-pro 上游更新，有新版自动缓存，不用重新下载页面。

# 截图预览

- 首屏主界面  

- 完整功能页  

# 在线演示 / 源码

- 在线试用：[https://pinyin-annotator.tjsky.net/](https://pinyin-annotator.tjsky.net/)
- GitHub：[https://github.com/tjsky/pinyin-annotator](https://github.com/tjsky/pinyin-annotator)（带自部署说明，fork 后开 Pages 就能当自己的注音站用）

## **字体版权说明**

本项目涉及使用了「印氪先生汉语拼音 优化版W4」商用拼音字体。经过和字体作者联系，对项目做出修改并声明如下。

- **项目代码中不包含字体文件** ：工具只在您本机已安装该字体时调用它；未安装时会提示您自行前往下载地址安装，不安装也不影响任何功能（拼音将以楷体等系统字体回退显示）。

- 该字体版权归字体作者 **印氪先生** 所有， **仅限非商业场景下使用** ； **如需商用或内嵌，请自行联系印氪先生购买授权** ：[印氪先生（知乎主页）](https://www.zhihu.com/people/zou-wen-biao)。

- **免责声明** ：本项目演示截图展示了该字体的效果，仅为说明工具的拼音显示能力，截图中的字体为「印氪先生汉语拼音 优化版W4」商用字体， **本开源项目不内置提供该字体文件** ；如需商用请自行购买授权。

- 顺带提醒：您电脑 / 手机里的黑体、宋体、雅黑等同样是有版权的字体。网页调用本地已安装字体是允许的，但把打印成品用于商业用途时，请留意所用字体的授权范围。

第一次打开会自动填一篇示例文章（小蚂蚁搬家，带了大部分特殊音场景），可以先点着玩玩再贴自己的文章。给孩子做过注音读物的朋友应该知道「走着 zhe 还是 zháo」这种字查半天有多烦，欢迎提需求和多音字词典的反馈。下一步准备做个基于AI的版本。

## 更新日志&TODO

### TODO

- 拆分版本，分成mini、main、plus版
- 加入入口页
- 界面多语言支持「简/繁/EN」
- 简繁转换，支持转换两岸表达差异
- 注音标注
- 两岸读音转化

### 更新日志

#### 20260919

- **加入分词功能** ：让生成的文字更符合部分教材的需求，（为了体积仅录入了前3W个高频词），如果不对可在预览框手动分词。
- **支持本地字体** ：需要同意获取本地字体权限，这样就可以用自己的字体了。（受限于手机端浏览器的权限问题，这个功能在手机上没用）
- **加入Andika拼音字体** ：Andika字体是教科文牵头搞的一套针对儿童识字与语言教育开发的无衬线体，虽然和教材手写体略有区别，但不耽误小朋友理解识别。（手机上没法安装上边的「印氪先生汉语拼音」，用Andika作为兜底拼音字体方案）
- **加入霞鹜文楷GB网络字体** ：比标准楷体字型更好看，而且拼音的写法也是符合国标的，虽然和教材手写体略有区别，但不耽误小朋友理解识别。

#### 20260920

- 分词功能升级，内置满血分词词典
- 加入工具入口页，将工具拆分成mini版，main版，plus版，分别对应轻量使用，日常使用，和满血版教学用场景。

#### 20260921

- 初步实现界面多语言切换「简/繁/EN」

#### 20260923

- 正式增加繁体/注音版，现在可以标注音啦，港台海外华人也能用了
- 加入繁简转换：由 OpenCC 驱动，「更多设置 → 繁简转换」可选 **简体 ⇆ 标准繁体 / 台湾繁体 / 香港繁体** ；勾选「同时转换常用词汇」后可以连地区用词一并转换（鼠标→滑鼠、软件→軟體、打印→列印），一字多繁（头发→頭髮、发财→發財）

#### 20260925~30

- **让注音能正确显示** ：我是万万没想到，在现在的操作系统内居然都没有可用的注音显示标准！！！台湾用户不是用户吗？我一查，我去，当年台湾的图书出版机构，面对多音字注音的解决方案居然是，将不同的读音分布在多套“注音字体”内，然后挨个字切换字体实现读音切换的？？？这都是什么鬼才凑合！！
- 修一些小bug，比如错位呀，说明的措施啊，等等小地方。

#### 20261006

- 阅读模式下增加朗读/跟读工具条：调用浏览器的接口读文字，可以调用麦克风实现跟读，适合教育场景。
- 补充遗漏的编译脚本和依赖文件，用户和协作者可以在本地复现完全字节一致的结果

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 17 日 04:33 UTC](https://meta.appinn.net/t/topic/91955/2 "2026-09-17T04:33:09Z")

</div>

额，出了点问题，更新了一下:grin:把人教版拼音字体放进去了。

比如 宋体、楷体、雅黑等会使用这个a

 ![_20260917133326](https://h2cdn.appinn.me/original/3X/3/e/3ee55cc55f851d901d3a725269991f1921af53ac.png)  
这是不符合拼音国标的写法，需要改成下图这样的  
 ![_20260917133447](https://h2cdn.appinn.me/original/3X/0/0/00f39d3d68422912159819b985092122049f93cf.png)

包括 o，b，y，l，z，s，g等写法细节，人教版教材用的都是一套方正的定制版字体，这套字体肯定是没法用的，方正只授权给人教用。咱们用不上。

翻了一遍全网，找到了有个大佬自己做的一套拼音字体： [印氪先生汉语拼音字体](https://zhida.zhihu.com/search?content_id=241978410&content_type=Article&match_order=1&q=%E5%8D%B0%E6%B0%AA%E5%85%88%E7%94%9F%E6%B1%89%E8%AF%AD%E6%8B%BC%E9%9F%B3&zhida_source=entity)

请注意根据印氪先生汉语拼音字体的授权规则，如果你使用这套拼音字体制作读物时，请自己本地/自部署（个人/公益使用）且不要用于商业使用。这套字体是注册了版权的，小心侵权问题。（字体侵权还是很贵的）

---

<div class="post-metadata">

作者： ![Xenon](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/xenon/32/63063_2.png) [@Xenon](https://meta.appinn.net/u/Xenon)\
发布日期： [2026 年9 月 17 日 05:48 UTC](https://meta.appinn.net/t/topic/91955/3 "2026-09-17T05:48:31Z")

</div>

动作好快呀，点个赞

---

<div class="post-metadata">

作者： ![NeverMind](https://meta-edge.appinn.com/letter_avatar_proxy/v4/letter/n/53a042/32.png) [@NeverMind](https://meta.appinn.net/u/NeverMind)\
发布日期： [2026 年9 月 17 日 05:49 UTC](https://meta.appinn.net/t/topic/91955/4 "2026-09-17T05:49:35Z")

</div>

动作确实快，我昨晚才刷到那个帖子，今天中午就已经做完上线了

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 17 日 06:06 UTC](https://meta.appinn.net/t/topic/91955/5 "2026-09-17T06:06:43Z")

</div>

因为是自己也需要用的，有动力自然开发的飞快啦 :laughing:

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 17 日 10:02 UTC](https://meta.appinn.net/t/topic/91955/6 "2026-09-17T10:02:42Z")

</div>

其实在回了帖子后，跟AI半个多小时就搞出了第一版，又花了半个小时改两次轮，初版就出来了。

AI的效率还是太高了 :rofl:

但是想搞的完善，还是需要很多轮反复修改的（摸鱼改了1天了），毕竟很多缺少的功能和异常问题，只有用的时候才会感觉到。

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 21 日 05:29 UTC](https://meta.appinn.net/t/topic/91955/7 "2026-09-21T05:29:37Z")

</div>

看標題以為是台灣這邊用的注音 :sweat_smile:

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 21 日 06:05 UTC](https://meta.appinn.net/t/topic/91955/8 "2026-09-21T06:05:01Z")

</div>

你别说，这个功能可以有。  
加入简繁体转换，注音

---

<div class="post-metadata">

作者： ![EAea](https://meta-edge.appinn.com/letter_avatar_proxy/v4/letter/e/e47c2d/32.png) [@EAea](https://meta.appinn.net/u/EAea)\
发布日期： [2026 年9 月 22 日 05:24 UTC](https://meta.appinn.net/t/topic/91955/9 "2026-09-22T05:24:41Z")

</div>

看到这个突然想起来三十多年前的小学第一册。。。

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 22 日 09:17 UTC](https://meta.appinn.net/t/topic/91955/10 "2026-09-22T09:17:52Z")

</div>

做这个项目才知道，汉语拼音的规则其实远比小学时学的复杂……课本和老师教的其实也不一样。主打一个稀里糊涂的学。

1. 「一个」到底标「一个yí gè」还是「一个yī gè」根据汉语拼音方案，出版物应该写后面这个，但是实际读成第一个，教材和儿童读物则需要写成前面这个。
2. 「花儿」到底标「花儿huār」还是「花儿huā er」根据汉语拼音方案，出版物应该写前面这个，但是实际读成第一个，教材和儿童读物则需要写成后面这个。等等一堆细节

最近在做 @Duah 说的注音，结果发现需要考虑的事情更多了。

1. 读音差异:比如垃圾：普通话是读「垃圾lā jī」国语是读「垃圾lè sè」
2. 对同一个事务的用词差异：「打印/导出PDF」/「列印/匯出PDF」
3. 注音还有竖排和横排的差异，一个写在字的右侧，一个写在字的上侧，等等一堆细节问题……  
 ![_20260922171246](https://h2cdn.appinn.me/original/3X/9/8/98c8851ea6b3259eecf8292701410f55c0773078.png)  
 ![_20260922171321](https://h2cdn.appinn.me/original/3X/8/5/858679f48dfccfe9addaebb06f9634451ba7ca65.png)

如果还有考虑粤语拼音，那就更头秃了，粤音自己都是一笔糊涂账，我问了一圈查了一圈，香港小学貌似没完整的教过拼音，也没非常权威的粤音资料。（粤语自己都分裂了很多版本，读音差异问题太多了）

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 22 日 09:55 UTC](https://meta.appinn.net/t/topic/91955/11 "2026-09-22T09:55:27Z")

</div>

你可以按照大陸讀音做就行，或者可以設定兩套讀音

畢竟基本都聽的懂

"一個"的話，是第二個發音才正確，第一個發音是口語習慣，兩岸在這點是一樣的

不過我個人完全沒有學習過拼音系統，花兒的讀音，我自己也不確定拼音怎麼解讀

台灣的注音是 ㄏㄨㄚ ㄦˊ

(題外話，注音的文字也是中文字，前身是 章太炎 整理出的 紐文，跟日文符號沒關係

垃圾的話，我覺得大陸的讀音比較順口，日常我也開始這樣講

不過台灣這邊的讀做"肋色"，起源是古代標準音，以 吳語方言 為樣本

大陸當前的"拉基"，主要是鄉村方言，經由讀音標準化重新制定的，算是比較新的讀音

像是比較偏古漢語讀音的台語(台灣閩南語支)，垃圾 讀作 punˋ so˙

而且留存有古字詞正式寫法，寫作"糞埽"，也就是 垃圾 這個詞的前身

* * *

用詞差異的部分，網上有不少差異對照表可以作為參考資源

我有參與\*\*[文件名称交换器](https://meta.appinn.net/t/topic/45420)\*\* 的台灣詞語翻譯，也是採用人工校對的方式

如果你有需要，我也可以在能力範圍提供協助

注音的基本寫法是豎排，橫排則主要出現在一些較少見的字詞標記讀音

但是要注意的是，注音的聲調符號不是寫在末尾

如果只有一個注音符號，聲調符號在該符號的右上位置

如果有兩個以上注音符號，則聲調符號是放在最下面的那個符號的右上位置

注音符號最多就3個

當然使用上也有例外，例如輸入法，是先把注音符號輸入完，末尾再加聲調符號

* * *

補充：

我查了一下，看到台語的"垃圾" 還有 lah-sap 這個讀音，才赫然想起確實是這樣

也是最近觀看台語頻道，才知道 台語(閩南語支) 也有白話音跟讀書音

而 lah-sap 應該就是垃圾的台語讀書音(古官話)

也就是今天台灣"垃圾"讀音(吳語方言)的唸法

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 22 日 09:55 UTC](https://meta.appinn.net/t/topic/91955/12 "2026-09-22T09:55:46Z")

</div>

關於粵語，我也只知道一些皮毛，主要是港式粵語的部分

這部分可能要請教母語人士，有在網上看到很多粵語大師

而且粵語也存在有自己的方言字，沒有母語人士的幫助，難以解讀

* * *

文字方面，我有學習罕見字的習慣，所以粵語方言字我知道一些

例如 (括號標記讀音)

氹(蕩)仔島 (澳門)

寨乪(劇)村 (香港)

紅磡(勘)灣 (香港)

作壆(博)坑 (香港)

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 22 日 10:01 UTC](https://meta.appinn.net/t/topic/91955/13 "2026-09-22T10:01:04Z")

</div>

台語讀音可以參考這個網站

> **[人際關係、社交 - 分類索引-教育部臺灣台語常用詞辭典](https://sutian.moe.edu.tw/zh-hant/hunlui/#lui14)**
>
> 中華民國教育部 版權所有 © 2026 Ministry of Education, R.O.C. All rights reserved.® | 辭典詞目分類索引，按各分類列出詞目清單。

客語、原民語的線上讀音辭典也有，有需要應該能查的到

不過原民語是南島語族的系統，不是漢語體系，所以不支持中文

如果你真的有使用拼音注音標注方言的打算，我相信這會有很大的工程量

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 22 日 10:17 UTC](https://meta.appinn.net/t/topic/91955/14 "2026-09-22T10:17:36Z")

</div>

目前是做了两套读音，大陆读音和台湾读音都有，台湾读音我用的是「 [萌典](https://www.moedict.tw/)」的数据，他说是直接整合了 《[重編國語辭典修訂本](https://dict.revised.moe.edu.tw/)》、《[臺灣台語常用詞辭典](https://sutian.moe.edu.tw/zh-hant/piantsip/pankhuan-singbing/)》《[臺灣客語辭典](https://hakkadict.moe.edu.tw/)》。

注音横竖我用的截图就是因为：我竖排的样式还没写好 :laughing:，目前只是把横排的注音直接竖过来凑合看下打印出来的排效果

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 22 日 10:22 UTC](https://meta.appinn.net/t/topic/91955/15 "2026-09-22T10:22:13Z")

</div>

我看了一下，萌典的品質挺好的，照著用應該不會有錯

雖說兩套讀音的工作量依然很大就是了，給您加油打氣!

---

<div class="post-metadata">

作者： ![CCR](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/ccr/32/68442_2.png) [@CCR](https://meta.appinn.net/u/CCR)\
发布日期： [2026 年9 月 22 日 11:20 UTC](https://meta.appinn.net/t/topic/91955/16 "2026-09-22T11:20:20Z")

</div>

原来所谓的『乐色』是台湾读音『垃圾』的“空耳”么……这真是长知识了

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 22 日 13:34 UTC](https://meta.appinn.net/t/topic/91955/17 "2026-09-22T13:34:12Z")

</div>

注音“一”（/i/）于横排时写作一竖，竖排时写作一横，这个区分吗？  
我查的资料大部分说法是：台湾现在电子文件上统一会写成一横，大陆不存在竖排，只有横排，会写成一竖。

---

<div class="post-metadata">

作者： ![tjsky](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tjsky/32/31059_2.png) [@tjsky](https://meta.appinn.net/u/tjsky)\
发布日期： [2026 年9 月 22 日 13:35 UTC](https://meta.appinn.net/t/topic/91955/18 "2026-09-22T13:35:47Z")

</div>

是的，这个应该是台湾-香港-广州/福建-内地其他省份这么个传播链。

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 22 日 13:49 UTC](https://meta.appinn.net/t/topic/91955/19 "2026-09-22T13:49:15Z")

</div>

![image](https://h2cdn.appinn.me/original/3X/0/1/01c05f22118be0d9f93f385412355cd729a82c60.png)

平常就像萌典上的"一"一樣寫

---

<div class="post-metadata">

作者： ![Duah](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/duah/32/51072_2.png) [@Duah](https://meta.appinn.net/u/Duah)\
发布日期： [2026 年9 月 22 日 13:55 UTC](https://meta.appinn.net/t/topic/91955/20 "2026-09-22T13:55:59Z")

</div>

(看的不是很懂

是指大陸有流傳這句"樂色"嗎?

[下一页](https://meta.appinn.net/t/topic/91955.md?page=2)
