mcpField
G
google-fonts

google-fonts

github.com/sliday设计与 UI17249 次安装8 周前更新
代码仓库

关于 google-fonts

google-fonts 是面向网页项目的排版系统生成器，提供可搜索的 Google Fonts 字体资料、配对数据和模块化字号比例。它帮助设计师和开发者选择字体，并生成 CSS、Tailwind 配置及嵌入链接。

主要功能

  1. 01搜索和筛选字体资料
  2. 02查找推荐字体配对
  3. 03查询字体详情和字号比例
  4. 04生成 CSS 与 Tailwind 设置
  5. 05浏览 100 个排版系统示例

适用场景

  1. 01为网页产品挑选字体
  2. 02搭配标题与正文的字体
  3. 03创建响应式字号比例
  4. 04按项目类型查看系统示例

MCP 相关

连接 google-fonts MCP 服务时，技能建议优先使用其 search_fonts、generate_typography_system、lookup_font、list_scales 和 list_pairings 工具。仅安装技能时可改用脚本。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sliday/google-fonts-skill --skill google-fonts

安装后在 Claude Code 中输入/google-fonts确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE
CLAUDE.md
CHANGELOG.md
.gitignore
README.md
pyproject.toml
community-announcement.md
.claude-plugin/
marketplace.json
plugin.json
.github/
dependabot.yml
.github/workflows/
pages.yml
publish.yml
data/
scales.csv
pairings.csv
references/
pairing-principles.md
typographic-rhythm.md
registry/
awesome-mcp-servers.md
mcp-hub.json
smithery.yaml
scripts/
build-pairings.py
core.py
generate-llms-full.py
generate-css.py
fetch-and-enrich.py
generate-og-images.py
search.py
generate-showcase.py
showcase/
.nojekyll
showcase/pages/
anthem-brands.html
aether-analytics.html

详细介绍

Auto Google Font

面向 Web 项目的 Google Fonts 字体排版系统生成器。搜索 1,923 种字体，并为其补充字体排印风格标签（几何、人文主义、新哥特式等）、对比度等级和正文适用性评级。生成完整的字体排版节奏系统。

数据文件

  • data/fonts.csv — 1,923 种 Google Fonts，包含：Family、Category、Stroke、Personality、Expressive、Contrast、Width、Styles、Weight_Range、Variable、Variable_Axes、Body_Suitable、Quality_Tier（A/B/C）、Popularity_Rank、Mood、Best_For、Keywords、Subsets、Google_Fonts_URL、CSS_Import
  • data/pairings.csv — 73 组经过验证的字体配对，包含对比类型和比例建议
  • data/scales.csv — 8 种模块化字体比例，包含字号、行高、字间距和边距
  • references/typographic-rhythm.md — 比例计算、行高等级、间距规则
  • references/pairing-principles.md — 对比理论、决策树、超级字族

模式

MCP 提示： 如果已连接 google-fonts MCP 服务，请优先使用其工具—— search_fonts、generate_typography_system、lookup_font、list_scales、list_pairings—— 而不是下面的脚本。对于仅安装技能的情况，脚本可作为后备方案。

单字体（严格）

标题和正文使用同一种字体。字重范围必须涵盖 400+700。必须适用于正文。

python3 scripts/search.py "modern clean SaaS" --mode single
python3 scripts/search.py "geometric professional" --mode single --tier A
字体配对（对比）

使用两种具有字体排印对比的字体。优先搜索经过验证的配对。

python3 scripts/search.py "elegant editorial luxury" --mode pair
python3 scripts/search.py "tech startup bold" --mode pair
查询与比例
python3 scripts/search.py "Inter" --mode lookup        # full metadata for a named font
python3 scripts/search.py "marketing bold" --mode scale  # search type scales
完整系统输出

根据字体选择和比例选择，生成 CSS + Tailwind + 嵌入链接。

# Single font
python3 scripts/generate-css.py --font "Inter" --scale major-third --format all

# Font pair
python3 scripts/generate-css.py --heading "Playfair Display" --body "Inter" \
  --scale perfect-fourth --format all

# Custom weights and base size
python3 scripts/generate-css.py --heading "Space Grotesk" --body "DM Sans" \
  --heading-weights "400;700" --body-weights "300;400;500;700" \
  --scale minor-third --base 16 --format css

工作流

  1. 了解背景 — 询问：产品类型、风格、内容密度、现有品牌
  2. 搜索字体 — 使用相关关键词和模式运行 search.py
  3. 展示前 3 个结果 — 显示 Family、Personality、Contrast、Quality Tier、Weight Range
  4. 生成系统 — 使用所选字体和适当的比例运行 generate-css.py
  5. 交付 — 提供 CSS 自定义属性、Tailwind 配置和嵌入链接

快速决策指南

项目类型模式比例建议搜索词
SaaS / 仪表板singlemajor-second"clean professional geometric"
博客 / 内容pairmajor-third"editorial readable"
营销 / 落地页pairperfect-fourth"bold modern confident"
奢侈品 / 时尚pairaugmented-fourth"elegant premium serif"
文档singleminor-third"readable accessible humanist"
电商pairminor-third"clean friendly conversion"
作品集pairperfect-fourth"creative distinctive"
企业 / 政府singlemajor-second"trustworthy accessible corporate"

比例参考

比例比率适用场景
minor-second1.067密集型 UI、仪表板
major-second1.125应用、管理面板
minor-third1.2通用场景
major-third1.25博客、内容
perfect-fourth1.333营销、编辑内容
augmented-fourth1.414杂志、表现力强的设计
perfect-fifth1.5大量使用展示字体的设计
golden-ratio1.618主视觉区域

字体配对对比类型

  • 结构：衬线 + 无衬线（最稳妥，对比度最高）
  • 比例：几何无衬线 + 人文主义无衬线（微妙、现代）
  • 时代：旧式衬线 + 新哥特式无衬线（戏剧性强）
  • 字重：同一字体家族，使用不同字重（最简单）

质量规则

  1. 在 Google Fonts 嵌入代码中始终使用 display=swap
  2. 优先使用可变字体（减少 HTTP 请求，支持完整的字重灵活性）
  3. 绝不建议将单一字重的字体用于正文
  4. 建议字体前，先确认 Weight_Range 涵盖所需字重
  5. 正文字体：仅建议 Body_Suitable=="Yes" 的字体
  6. 优先推荐 A 级字体，其次是 B 级，再次是 C 级
  7. 为 fonts.googleapis.com 和 fonts.gstatic.com 添加 preconnect 提示
  8. 每个项目最多使用 3 个字体系列（标题 + 正文 + 可选等宽字体）
  9. css2 URL 使用分号分隔字重（wght@400;700），使用 .. 表示范围（[email protected]）； 逗号会被规范化，但格式错误的轴和连字符范围会被拒绝

输出内容

  • CSS 自定义属性：字体系列、字号、行高、字间距、行长
  • Tailwind 配置：fontFamily、包含 lineHeight 和 letterSpacing 的 fontSize
  • 带有 preconnect 的 Google Fonts <link> 嵌入代码
  • 响应式断点指南

示例库

100 套应用于虚构项目的预制排版系统。可浏览 showcase/index.html， 也可通过 showcase/showcase.json 进行程序化访问。

当用户说“给我看看示例”“帮我选一种风格”或“什么风格适合 SaaS 应用”时， 读取 showcase/showcase.json 并按项目类型筛选，推荐预制系统。

重新生成
python3 scripts/generate-showcase.py

如需了解详细的排版理论，请阅读 references/typographic-rhythm.md。 如需查看字体搭配决策树，请阅读 references/pairing-principles.md。

评论

支持 Markdown