Anki08｜製作帶注音符號的國字卡片的步驟

為了製作國中七年級的國文習字Anki卡片，研究了一下添加注音符號的操作方法，彙總在此，希望對於有需要的朋友們會有幫 。

方法1需要比較多的步驟，若你嫌麻煩，也可直接使用方法2。

1. 方法1. 使用帶加注音符號的字型檔

重點是將字型檔加入Anki的牌組集合內，如此才能在不同設備間同步。

[!danger] 注意！
破音字無法正確顯示，必須手動處理(以方法二自行輸入正確的注音)。

1. 由 ButTaiwan/bpmfvs: 注音IVS字型規格 Bopomofo IVS Font Specification 下載能免費使用的ㄅ注音芫荽字型，並安裝到Windows系統，字型檔路徑：C:\Users\使用者帳號\AppData\Local\Microsoft\Windows\Fonts\BpmfIansui-Regular.ttf

2. 若有使用Obsidian，則在有改用的CSS片段裡增加下列CSS類別：

   .yin {
   font-size: 2em;
   font-family: "ㄅ注音芫荽";
   }
   ruby {
   font-size: 2em;
   }

3. 找到牌組的集合媒體資料夾：C:\Users\使用者帳號\AppData\Roaming\Anki2\牌組名\collection.media，將上述BpmfIansui-Regular.ttf複製到牌組的集合媒體資料夾，並改名為_BpmfIansui-Regular.ttf(最開頭加上一個底線)

4. 啟動Anki系統，【工具】→【管理筆記類型】→找到要修改的筆記類型後按右側的【卡片】→進入模板的【樣式】輸入框

5. 新增下列內容到樣式，定義了字型yin (檔名是_BpmfIansui-Regular.ttf)與yin CSS類別：

   @font-face { font-family: yin; src: url('_BpmfIansui-Regular.ttf'); }
   /* "ㄅ注音芫荽"; */
   .yin {
   font-size: 2em; /* 字型大小放大兩倍 */
   font-family: "yin";
   }
   ruby {
   font-size: 2em; /* 字型大小放大兩倍 */
   }

6. 瀏覽牌組並修改測試卡片，點擊Back右側的<>以進入HTML模式，並插入下列HTML內容：

   <div class="yin">
   慫恿
   </div>

7. 瀏覽此測試卡片，最下方出現了帶有注音的芫荽字型
   

8. 點擊Anki應用程式的同步

9. 用瀏覽器瀏覽 AnkiWeb 並檢查卡片在網頁是否顯示正確
   

10. 手機的AnkiDroid App執行同步，檢查手機是否也能顯示注音
    

2. 方法2. 用HTML ruby標籤

使用HTML的<ruby>系列標籤(參考：Obs040-日文學習利器！擴充為中文注音與拚音標記)。

• <ruby>的style屬性能指定注音顯示位置為上方(ruby-position:over)或下方(ruby-position:under)
• 無法顯示在右方

<ruby style="ruby-position:over">
慫恿<rt>ㄙㄨㄥˇㄩㄥˇ</rt></ruby>

▼ 第一行是使用<ruby>，第二行是芫荽字型

3. Anki卡片內容

以下是使用Obsidian Yanki外掛組成的正面(---上方)與背面(---下方)內容：

慫恿
# 慫恿
的發音與解釋。

---

[anki:tts lang=zh_TW]慫恿[/anki:tts]

「鼓」動：激發。音ㄙㄨㄥˇㄩㄥˇ，從旁鼓動

<ruby style="ruby-position:over">
慫恿<rt>ㄙㄨㄥˇㄩㄥˇ</rt>
</ruby>

<div class="yin">
慫恿
</div>

4. 💡 相關鏈接

✅ ButTaiwan/bpmfvs: 注音IVS字型規格: https://github.com/ButTaiwan/bpmfvs/
✅ ㄅ注音芫荽字型檔下載: https://github.com/ButTaiwan/bpmfvs/releases

✅ Obs040-日文學習利器！擴充為中文注音與拚音標記 影片: https://youtu.be/KvdKm_KrOSM

5. 教學影片

https://youtu.be/_IbB8Cxk5iE

＃＃

您可能也會有興趣的類似文章

• Anki07｜Anki 文字轉語音服務(TTS)整合攻略 (0則留言, 2024/09/08)
• [Anki＃1] 用在線詞典助手(瀏覽器擴充)學會Anki的基本觀念 (2則留言, 2020/12/19)
• [Obs＃23] 更有彈性的整合Anki外掛：Obsidian_to_Anki (0則留言, 2020/12/17)
• [Anki＃3] 單詞寶：快速新增英文字卡的Addon之一 (0則留言, 2020/12/26)
• [Obs＃22] 讓有效學習更簡單！Markdown匯出到Anki | 使用Flashcards外掛 (0則留言, 2020/12/12)
• # [Anki＃5] 用AutoHotkey由文字檔產生Anki閃卡 (0則留言, 2021/02/16)
• [Anki＃6] 日文學習：瀏覽器擴充Yomichan (2則留言, 2021/02/21)
• 用ToastFish「偷偷」學英、日文 (0則留言, 2021/08/21)
• [Obs＃40] 日文學習利器！也能處理中文注音與拚音標記－Furigana外掛 (0則留言, 2021/05/13)
• 沙拉查詢：生字本與Anki整合的步驟 (0則留言, 2020/12/13)
• Obs163｜Yanki外掛製作Anki 克漏字(Cloze)閃卡技巧，同場加映翏央填空模板 (0則留言, 2024/08/04)
• Obs164｜將一篇英文文章製作成Anki閃卡的步驟，使用Yanki、ChatGPT(Copilot)與Note Splitter (0則留言, 2024/08/17)
• Obs165｜用Copilot (ChatGPT)與Yanki產生Anki的注音閃卡 (0則留言, 2024/08/24)
• 用mpv看影片學語言超方便！自動複製字幕並建立Anki卡片 (0則留言, 2021/06/20)
• 變更LibreOffice Writer貼上圖片的錨定預設類型為「作為字元」 (0則留言, 2017/08/18)