字體 - daniel-qa/Vue GitHub Wiki

https://buttaiwan.github.io/bpmfvs/

源流明體

https://github.com/ButTaiwan/bpmfvs/releases?utm_source=chatgpt.com

  • 引用注音字體
@font-face {
  font-family: 'BpmfGenRyuMin'; /* 工程用 */
  src: url('/fonts/BpmfGenRyuMin-R.ttf') format('truetype');
}

使用時：

body {
  font-family: 'BpmfGenRyuMin', '源流注音明體', serif;
}

實際例子：Ruby Annotation（回到字嗨）

html<!-- Character 層：纯編碼 -->
<ruby>
  字<rt>ㄗˋ</rt>
</ruby>

<!-- 渲染時 Glyph 層：選擇具體字型 -->
<ruby style="font-family: 'Serif'">
  字<rt>ㄗˋ</rt>
</ruby>

<!-- 換字型 → 同一個 Character，但 Glyph 不同 -->
<ruby style="font-family: 'Kai'">
  字<rt>ㄗˋ</rt>
</ruby>

看起來一樣都是「字」，但視覺效果不同（Glyph不同）

字符(Character) 和 字形 ( Glyph )

  • 用「字」舉例，最清楚

Character（字符）

定義：「字」這個漢字的「身份」

編碼：U+5B57

英文代碼：

  const char = "字";  // ← 這就是 Character
  console.log(char.charCodeAt(0)); // 23383 (U+5B57)

Glyph（字形）

同一個 Character（U+5B57），卻有不同的 Glyph：

  • 層級：視覺/渲染層
- 一個 Character 可以有多個 Glyph（不同字型的表現）
- 例：U+5B57 在宋體、楷體、黑體都是不同 Glyph
- 由「字型檔案」決定如何畫

渲染流程：
Character（U+5B57）
    ↓
查詢字型檔案（字.ttf）
    ↓
找到對應的 Glyph（某個座標點的筆畫集合）
    ↓
繪製成像素
    ↓
你看到的「字」

┌─────────────┬─────────────┬─────────────┐
│   宋體      │   楷體      │   黑體      │
├─────────────┼─────────────┼─────────────┤
│     字      │     字      │     字      │
│  (細直筆)   │  (撇捺清楚) │  (粗粗壯壯) │
└─────────────┴─────────────┴─────────────┘

同一個編碼 U+5B57，3個不同的 Glyph

  • 什麼是「漢字」？

在電腦層面，「漢字」是「編碼」

你打：ㄅㄆㄇ（注音輸入法）
  ↓
IME 轉換
  ↓
產生：U+5B57（Unicode 編碼）
  ↓
渲染成：字（視覺上看到的字形）

「漢字」 = 一個 Unicode 碼位（Code Point）

網頁用 或 <textarea>，瀏覽器直接接收「漢字」

IME 是作業系統層面的東西（Windows、Mac、Linux 各自處理）

網頁無法控制 IME

  • 結論先講（很重要）

👉 沒有一種「字型」是你輸入字碼就自動變成「中文 + 注音」的

因為這件事其實拆成兩層：

層級 負責什麼
輸入法（IME） 你打ㄅㄆㄇ → 變成「漢字」
字型（Font） 決定字長怎樣
排版（Layout） 決定注音顯示在哪
⚠️ **GitHub.com Fallback** ⚠️