# ✍️ Drama Ling 字體系統

**更新日期**: 2025-09-14
**版本**: v1.0
**狀態**: 基礎規範

## 📝 字體家族

### 主要字體
```css
--font-primary: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
--font-secondary: 'Roboto', 'Microsoft JhengHei', sans-serif;
--font-mono: 'Fira Code', 'Consolas', monospace;
```

### 語言特定字體
- **英文**: Inter (主要), Roboto (次要)
- **繁體中文**: Noto Sans TC, Microsoft JhengHei
- **簡體中文**: Noto Sans SC, Microsoft YaHei
- **日文**: Noto Sans JP, Yu Gothic
- **韓文**: Noto Sans KR, Malgun Gothic

## 📏 字體大小系統

### 基礎尺寸
```css
--text-xs: 0.75rem;    /* 12px - 標籤、輔助文字 */
--text-sm: 0.875rem;   /* 14px - 次要內容 */
--text-base: 1rem;     /* 16px - 正文 */
--text-lg: 1.125rem;   /* 18px - 重要內容 */
--text-xl: 1.25rem;    /* 20px - 小標題 */
--text-2xl: 1.5rem;    /* 24px - 標題 */
--text-3xl: 1.875rem;  /* 30px - 大標題 */
--text-4xl: 2.25rem;   /* 36px - 頁面標題 */
--text-5xl: 3rem;      /* 48px - 展示標題 */
```

### 行高系統
```css
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
```

## ⚖️ 字重系統

```css
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

## 📱 響應式字體

### 桌面端 (>= 1024px)
- 標題: 2.25rem - 3rem
- 正文: 1rem - 1.125rem
- 輔助: 0.875rem

### 平板端 (768px - 1023px)
- 標題: 1.875rem - 2.25rem
- 正文: 1rem
- 輔助: 0.875rem

### 手機端 (< 768px)
- 標題: 1.5rem - 1.875rem
- 正文: 0.875rem - 1rem
- 輔助: 0.75rem

## 🎯 使用場景

### 學習內容
- **詞彙展示**: 1.5rem - 2rem, font-semibold
- **例句**: 1rem - 1.125rem, font-normal
- **翻譯**: 0.875rem, font-normal, 灰色

### 介面元素
- **按鈕文字**: 0.875rem - 1rem, font-medium
- **輸入框**: 1rem, font-normal
- **標籤**: 0.75rem - 0.875rem, font-medium

### 遊戲化元素
- **分數顯示**: 1.5rem - 2rem, font-bold
- **等級標示**: 1.125rem, font-semibold
- **成就文字**: 1rem, font-medium

## 🌏 多語言考量

### 中文優化
- 行高增加 0.125 (相對英文)
- 字重避免使用 light (300)
- 最小字體不小於 14px

### 混合排版
- 中英文間自動添加間距
- 數字使用等寬字體
- 標點符號對齊處理

## 📐 排版規範

### 段落間距
- 段落間: 1.5em
- 標題與內容: 1em
- 列表項: 0.5em

### 文字對齊
- 標題: 居中或左對齊
- 正文: 左對齊
- 數字: 右對齊或等寬居中

## 🔗 相關資源
- [設計代幣 CSS](./tokens/design-tokens.css)
- [元件文字規範](./components/web-components.md)
- [多語言規範](../specifications/i18n-standards.md)