2.7 KiB
2.7 KiB
✍️ Drama Ling 字體系統
更新日期: 2025-09-14 版本: v1.0 狀態: 基礎規範
📝 字體家族
主要字體
--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
📏 字體大小系統
基礎尺寸
--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 - 展示標題 */
行高系統
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
⚖️ 字重系統
--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
文字對齊
- 標題: 居中或左對齊
- 正文: 左對齊
- 數字: 右對齊或等寬居中