Font Pairing

🔤 专业字体搭配与Web排版指南

专业字体搭配推荐工具,涵盖中英文字体组合、Web字体优化与实时预览,帮助设计师快速建立视觉层级与品牌一致性。

收藏
4.3k
安装
990
版本
1.0.4
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心功能与用法

font-pairing 是一款面向设计师与前端开发者的字体搭配专业工具,提供六大核心能力:

1. `pair` — 智能字体配对:根据风格场景(现代/复古/极简等)推荐标题+正文组合,内置对比度与可读性算法
2. `chinese` — 中文字体专项指南:解决中文字体文件大、加载慢、版权复杂的痛点,推荐开源/商用安全方案

3. `web` — Web 字体加载优化:提供 @font-face 最佳实践、FOUT/FOIT 规避策略、CDN 与本地托管权衡

4. `heading` — 标题字体精选:针对 display/h1-h6 层级推荐高冲击力的装饰性字体

5. `system` — 系统字体栈:生成跨平台 fallback 方案(iOS/macOS/Windows/Android),确保无网络时的可用性

6. `preview` — 实时 HTML 预览:一键生成可交互的字体展示页面,支持导出分享给团队评审

显著优点

  • 场景化精准:不同于通用字体库,命令设计紧扣实际工作流(从选型到上线)
  • 中文深度适配:专门处理 CJK 字重缺失、行高调整、标点挤压等本土化问题
  • 工程化输出:直接生成可复制的 CSS/Sass 代码片段,减少手写错误
  • 轻量预览:无需设计软件即可在浏览器验证实际效果

潜在局限

  • 依赖外部字体源:未内置字体文件,需配合 Google Fonts、Adobe Fonts 或自主版权字体使用
  • 审美主观性:算法推荐仍需人工最终判断,复杂品牌项目建议叠加设计师经验
  • 动态加载限制:预览功能可能受浏览器 CORS 策略影响部分第三方字体展示

适合人群

  • UI/UX 设计师(快速提案阶段)
  • 前端工程师(Typography 方案落地)
  • 独立开发者(无设计团队时的自助方案)
  • 内容创作者(博客/ newsletter 视觉升级)

常规风险提示

  • 版权合规chinese 命令虽标注商用安全,用户仍需二次核实授权范围(尤其是变形体、字重衍生)
  • 性能权衡:装饰性 Web 字体可能增加 100-500KB 加载,移动端建议启用 system 降级方案
  • 无障碍注意:确保正文字体 WCAG 对比度达标,避免过度依赖细体(font-weight < 400)

Font Pairing 内容

scripts文件夹
手动下载zip · 4.9 kB
font.shtext/x-shellscript
请选择文件