a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
50 lines
2.9 KiB
Markdown
50 lines
2.9 KiB
Markdown
# 默认字体组合推荐
|
||
|
||
**使用时机**：仅在用户未指定字体方案 且 主题中无自定义字体定义时使用。
|
||
|
||
## 🔤 推荐列表
|
||
|
||
| 字体组合 | 推荐理由 | 中文环境表现 (Windows/Mac) | 适用场景 |
|
||
|---------|---------|--------------------------|---------|
|
||
| **Inter + System Sans**<br>(系统默认黑体) | ⚡️ 性能之王 (首选)<br>英文用 Inter (Tailwind 默认)，中文回退到系统字体 (PingFang/YaHei)。<br>无网络延迟。 | • Mac: 苹方 (完美)<br>• Win: 微软雅黑 (清晰)<br>利用系统渲染，字迹最锐利。 | **UI 界面、按钮、导航栏**。<br>绝大多数 SaaS 产品的默认选择。 |
|
||
| **Noto Sans SC**<br>(思源黑体) | 🎨 视觉一致性<br>Google Fonts 开源。解决 Windows 下微软雅黑字重缺失（只有 Regular/Bold）的问题。 | 双端一致<br>在 Windows 上也能显示出极细(Light)或极粗(Black)的优美字重。 | **营销页面、高保真原型**。<br>当用户不想看微软雅黑那个"笨重"的样子时。 |
|
||
| **JetBrains Mono**<br>(代码字体) | 💻 开发者最爱<br>开源等宽字体，连字特性（Ligatures）极美，阅读代码不累。 | 极佳<br>主要显示英文代码，中文备注会回退到系统黑体，互不干扰。 | **代码编辑器、JSON 预览**、<br>Markdown 里的代码块。 |
|
||
| **Noto Serif SC**<br>(思源宋体) | 📄 文档沉浸感<br>现代风格的宋体，屏幕阅读优化极佳，比系统自带的"宋体"更清晰。 | 双端一致<br>适合长文阅读，有一种"打印刊物"的高级感。 | **PRD 文档模式、阅读模式**。<br>模拟书籍或正式公文的排版。 |
|
||
|
||
## 🎯 选择策略
|
||
|
||
**按场景匹配**：
|
||
|
||
1. **UI 界面（默认）** → **Inter + System Sans**
|
||
- 按钮、表单、导航、卡片
|
||
- 无需额外加载，性能最优
|
||
|
||
2. **营销页/高保真原型** → **Noto Sans SC**
|
||
- 需要精确控制字重
|
||
- 追求视觉一致性
|
||
|
||
3. **代码展示** → **JetBrains Mono**
|
||
- 代码编辑器
|
||
- 技术文档中的代码块
|
||
|
||
4. **长文阅读** → **Noto Serif SC**
|
||
- 文章、博客、文档
|
||
- 需要"纸质感"的阅读体验
|
||
|
||
## 💡 实现注意事项
|
||
|
||
1. **性能优先**：默认使用系统字体，避免加载延迟
|
||
2. **字重一致性**：Windows 下微软雅黑只有 400/700，如需更多字重需用 Web Font
|
||
3. **中英混排**：确保英文字体在 font-family 前面，中文字体在后面作为回退
|
||
4. **字体加载优化**：
|
||
- 使用 `font-display: swap` 避免字体加载阻塞
|
||
- 按需加载字重，不要全部引入
|
||
- 考虑使用 `@fontsource` npm 包而非 Google Fonts CDN（国内访问更快）
|
||
|
||
## ⚠️ 常见陷阱
|
||
|
||
- ❌ 不要同时加载多个 Web Font，会严重影响性能
|
||
- ❌ 不要在 UI 界面使用宋体，阅读体验差
|
||
- ❌ 不要在代码块使用非等宽字体，会导致对齐错乱
|
||
- ✅ 优先使用系统字体 + Inter 组合，除非有明确的视觉一致性需求
|