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