118 lines
2.7 KiB
Markdown
118 lines
2.7 KiB
Markdown
# ✍️ 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) |