功能说明: 本技能涵盖 中文交互、化工作流场景 等核心能力。

谷歌字体工具（免费版）

概述

本工具帮助个人开发者正确加载 Google Fonts，规避不可见文字、冗余字重、缺少 preconnect 等常见性能坑，并提供经典字体搭配与按用途选字体清单。适合单项目快速优化。

核心能力

核心功能执行

用input_params参数进行配置。

输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

输出: 返回结果处理与输出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、Google、Fonts、子集与经典搭配工、性能加载与字体搭、配工具、优选加载、变量字体与按需字、重加载、经典衬线、科技风搭配推荐、按用途选字体与常、见错误规避等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一：正确加载字体

<!-- 双 preconnect + display=swap -->
<link rel="preconnect" href="https://fonts.googleapis.com">
gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

/* 始终带回退栈 */
font-family: 'Inter', system-ui, sans-serif;

场景二：按用途选字体

场景三：经典搭配

衬线 + 无衬线（经典对比）:
  Playfair Display（标题）+ Source Sans Pro（正文）
  Lora（标题）+ Roboto（正文）

纯无衬线（现代干净）:
  Inter（标题正文同族，字重区分层级）
  Montserrat（标题）+ Hind（正文）

不适用场景

以下场景谷歌字体工具不适合处理：

• 纯技术文档撰写
• 学术论文写作
• 法律文书起草

触发条件

需要生成营销文案、写作内容、标题优化、内容创作时使用。不适用于非本工具能力范围的需求。

快速开始

1. 确定标题与正文字体。
2. 用 display=swap 与双 preconnect 加载。
3. 只加载用到的字重（通常 2-3 个）。
4. CSS 中始终带回退栈。

# 本地预览
python -m http.server 8000

结果处理: 执行完成后,查看输出结果确认操作状态。成功时输出包含处理摘要和结果数据;失败时根据错误信息排查问题,查阅错误处理章节获取恢复步骤。

示例

变量字体单文件加载：

<!-- 变量字体：单文件覆盖全部字重 -->
googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

/* 变量字体可用任意字重值 */
font-weight: 450;

优选实践

• 只加载用到的字重：每个冗余字重约浪费 20KB，通常 2-3 个足够。
• 必加 display=swap：否则字体加载前文字不可见。
• 双 preconnect：googleapis 与 gstatic 都要 preconnect，gstatic 加 crossorigin。
• 展示体勿用于正文：Lobster、Pacifico、Abril Fatface 仅作标题。
• 别用两个相似字体：Roboto + Open Sans 几乎一样，选一个即可。

常见问题

Q1：加载 6 个字重保险吗？ A：不保险。只加载用到的，通常 400/600/700 三个足够。

Q2：为什么字重没生效？ A：CSS 写了 font-weight:600 但只加载了 400 和 700。加载的字重必须包含 600。

Q3：免费版支持自托管吗？ A：不支持。GDPR 自托管与子集化工具为专业版能力。

Q4：CJK 字体怎么办？ A：Noto Sans JP 等 CJK 字体很大，Google 会切片但仍偏重，按需评估。

Q5：display=swap 会闪烁吗？ A：会有短暂 FOUT（无样式文本闪现），但优于不可见文字。

进阶用法

字重加载策略

不同场景字重需求不同，按需加载节省体积：

落地页 hero:    700（粗体标题）+ 400（正文）
长文阅读:       400 + 600（小标题）
数据看板:       400 + 500（强调数值）
极简品牌站:     仅 400 + 变量字体调字重

回退栈设计

字体加载失败时回退栈决定体验，按场景设计：

/* 衬线展示体回退 */
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;

/* 无衬线 UI 回退 */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

/* 等宽回退 */
font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

字体加载性能自检

自检清单:
  [ ] display=swap 已加
  [ ] 双 preconnect 已加（googleapis + gstatic crossorigin）
  [ ] 仅加载用到的字重（≤ 3 个）
  [ ] 变量字体用范围语法 wght@100..900
  [ ] CSS 回退栈完整
  [ ] 展示体未用于正文

字体搭配原则

• 对比要明显：衬线+无衬线，或粗+细，别两个相似字体并列。
• 角色要单一：标题字体只做标题，正文字体只做正文。
• 情绪要匹配：严肃用衬线，科技用无衬线/等宽，活泼用圆体。
• 数量要克制：一页最多 2 个字族，多了显乱。
• 等宽有讲究：数字、代码用等宽，对齐更整齐。

常见坑速查

依赖说明

运行环境

• Agent 平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI 等）
• 操作系统: Windows / macOS / Linux
• 浏览器: 任意现代浏览器

依赖详情

API Key 配置

• 本工具为纯 Markdown 指令，无需额外 API Key
• 字体资源通过 CDN 引入，无需鉴权

可用性分类

• 分类: MD+EXEC（Markdown 指令 + 命令行预览）
• 说明: 通过自然语言指令驱动 Agent 产出字体加载代码与搭配方案

错误处理

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响
• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

安全注意事项

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。