字体管理器（免费版）

网页字体排版指南。展示与正文字体区分、安全配对、字重渲染、行高行宽规范。

你的网页是否用了展示字体做正文导致可读性差？两个字体太相似看起来像配对错误？细字重在Windows上模糊不清？行高过密让阅读变成折磨？

字体管理器免费版帮助你避开网页排版中最常见的错误，从字体选择、配对、字重、行高到加载性能，每条规则附带正确与错误示例对比.

架构总览

输入格式

参数名	类型	必填	说明
input	string	是	字体管理器处理的输入数据或指令
options	object	否	附加配置选项,如模式选择、格式偏好等
callback_url	string	否	异步处理完成后的回调通知URL

┌────────────────────────────────────────────────┐
│           字体排版管理体系                     │
├────────────────────────────────────────────────┤
│                                                │
│  ┌──────────────┐  ┌──────────────┐            │
│  │  字体选择     │  │  字体配对     │            │
│  │  Selection  │  │  Pairing    │            │
│  │              │  │              │            │
│  │ 展示vs正文   │  │ 安全配对表   │            │
│  │ 分类判断     │  │ 冲突避免     │            │
│  └──────────────┘  └──────────────┘            │
│          │                │                     │
│          └────────────────┼─────────┘          │
│                           ▼                     │
│                   ┌──────────────┐              │
│                   │  排版参数     │  ← 行高行宽  │
│                   │  Typography │    全大写     │
│                   └──────────────┘              │
│                           │                     │
│                           ▼                     │
│                   ┌──────────────┐              │
│                   │  性能优化     │  ← 加载策略  │
│                   │  Performance │    系统字体   │
│                   └──────────────┘              │
│                                                │
└────────────────────────────────────────────────┘

使用流程

阅读## 核心能力章节了解skill功能
按## 依赖说明配置环境
执行所需能力对应的命令
参考## 错误处理章节处理异常
查看## FAQ解答常见疑问

一分钟检查你的字体排版

# 1. 分析CSS中的字体使用情况
python3 （请参考skill目录中的脚本文件） analyze styles.css
# ...
# 2. 检查字体配对是否合理
python3 （请参考skill目录中的脚本文件） check-pairing --heading "Playfair Display" --body "Source Sans Pro"
# ...
# 3. 生成排版参数建议
python3 （请参考skill目录中的脚本文件） suggest --type body-text
# ...
# 4. 检查字体加载性能
python3 （请参考skill目录中的脚本文件） perf-check index.html

可复制模板

将以下内容加入前端开发检查清单：

# ...
**响应解析**: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.
# ...
# ...
## 快速开始

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

> 详细的输入输出格式请参考下方章节说明。

## 字体排版检查清单
# ...
每次页面开发完成后检查：
1. 分析字体使用
# ...
2. 检查配对合理性
   python3 （请参考skill目录中的脚本文件） check-pairing --heading "字体A" --body "字体B"
# ...
3. 性能检查

核心能力

1. 展示字体与正文字体区分

类型	用途	字号范围	示例字体
展示字体	标题、大字	24px+	Abril Fatface, Bebas Neue, Lobster
正文字体	段落、正文	12-18px	Inter, Roboto, Georgia, 思源黑体

判断规则：

字体看起来装饰性强或有极端粗细对比 → 展示字体，不可用于正文
字体设计用于12-18px小字号阅读 → 正文字体，可用于段落

错误示例：

/* 错误：展示字体用于正文 */
body {
  font-family: 'Lobster', cursive; /* 装饰字体做正文，可读性极差 */
}
// ...
/* 正确：展示字体仅用于标题 */
h1 {
  font-family: 'Lobster', cursive;
}
body {
  font-family: 'Inter', sans-serif;
}

处理: 解析展示字体与正文字体区分的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回展示字体与正文字体区分的响应数据,包含状态码、结果和日志.

2. 安全字体配对指南

配对策略	说明	示例
同超族配对	同一字体家族的不同变体	Roboto + Roboto Slab
衬线+无衬线	经典对比配对	Playfair Display + Source Sans Pro
不同字重同族	同字体不同粗细	Inter 400 + Inter 700
单字体方案	不确定就用一个	仅用Inter全字重

配对陷阱：

两个字体太相似 → 看起来像错误，不是配对
两个装饰字体冲突 → 永远不要Lobster配Pacifico
不确定能否区分 → 用一个字体（不同字重）

处理: 解析安全字体配对指南的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回安全字体配对指南的响应数据,包含状态码、结果和日志.

3. 字重与跨平台渲染

字重范围	渲染表现	使用建议
100-300（细）	Windows上渲染差	避免用于正文
400（常规）	跨平台稳定	正文默认选择
500-600（中粗）	跨平台良好	强调文字使用
700+（粗）	跨平台清晰	标题使用

渲染规则：

细字重（100-300）在Windows上渲染模糊，避免用于正文，使用400+
深色背景上的浅色文字看起来更细，字重提升一级
伪粗体（浏览器生成）不正确，只用字体实际包含的字重
检查字体是否有斜体，伪斜体（倾斜的罗马体）效果明显更差

/* 正确：使用字体实际包含的字重 */
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Inter包含此字重 */
}
strong {
  font-weight: 700; /* Inter包含此字重 */
}
// ...
/* 错误：使用字体不包含的字重（触发伪粗体） */
strong {
  font-weight: 900; /* Inter不包含此字重，浏览器伪渲染 */
}

处理: 解析字重与跨平台渲染的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回字重与跨平台渲染的响应数据,包含状态码、结果和日志.

4. 行高与行宽规范

参数	正文	标题	说明
行高	1.4-1.6	1.1-1.3	正文需要更大行高便于阅读
行宽	45-75字符	不限	超过75字符读者会迷失位置
max-width	65ch	-	用ch单位设置容器最大宽度

/* 正确：正文行高与行宽 */
p {
  line-height: 1.6;
  max-width: 65ch;
}
// ...
h1, h2, h3 {
  line-height: 1.2;
}

处理: 解析行高与行宽规范的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回行高与行宽规范的响应数据,包含状态码、结果和日志.

5. 全大写文字处理

/* 全大写需要增加字间距 */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.05em; /* 最小0.05em */
}

规则：

全大写文字必须增加字间距（letter-spacing），否则字母挤在一起
全大写仅用于少量文字（标签、小标题），大段全大写极难阅读
小型大写（small-caps）仅在字体支持时使用，伪小型大写看起来不专业

处理: 解析全大写文字处理的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回全大写文字处理的响应数据,包含状态码、结果和日志.

6. 孤行寡行修复

/* CSS方式修复孤行寡行 */
h1, h2, h3 {
  text-wrap: balance; /* 标题行数更均衡 */
}
p {
  text-wrap: pretty; /* 正文防止末行孤行 */
}

修复方法：

单词单独在末行看起来像错误，调整文字或容器宽度
text-wrap: balance让标题行数分布更均匀
text-wrap: pretty防止正文末行孤行（支持的浏览器）
手动修复：最后两个词之间用不换行空格（ ）

处理: 解析孤行寡行修复的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回孤行寡行修复的响应数据,包含状态码、结果和日志.

7. 字体加载性能

/* 防止字体加载时文字不可见 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* 关键：防止隐形文字 */
}

性能规则：

font-display: swap防止字体加载前文字不可见
子集化字体（仅保留需要的字符），仅拉丁字符可节省60%+
WOFF2是唯一需要的格式（通用支持，优秀压缩）
预加载关键字体：<link rel="preload" href="font.woff2" as="font" crossorigin>

处理: 解析字体加载性能的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回字体加载性能的响应数据,包含状态码、结果和日志.

8. 系统字体栈

/* 系统字体栈：零加载时间，原生外观 */
font-family: system-ui, -apple-system, BlinkMacSystemFont,
  'Segoe UI', Roboto, sans-serif;

系统字体优势：

零加载时间，每个平台原生外观
system-ui现已广泛支持，比列出所有fallback更简洁
始终以通用fallback结尾（sans-serif、serif、monospace）

处理: 解析系统字体栈的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回系统字体栈的响应数据,包含状态码、结果和日志. 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：网页字体排版指南、涵盖字体选择、配对规则、字重渲染、行高行宽等核心排、版知识、字体管理器免费版、解决网页排版的、常见错误、展示字体用在正文、导致可读性差、两个相似字体配对、看起来像错误、细字重在、Windows、上渲染模糊、行高过密导致阅读、全大写文字字母挤、在一起、这些错误让网页看、起来不专业、但开发者往往不知、道问题出在哪里、Use、when、需要项目管理、任务规划、进度跟踪、团队协作时使用、不适用于实际人员、绩效评估等.

使用场景

场景一：新项目字体选择（设计师角色）

痛点：新项目需要选择标题字体和正文字体，不知道哪些配对安全，怕选错导致排版不专业. 解决方案：

# 检查字体配对是否合理
python3 （请参考skill目录中的脚本文件） check-pairing \
  --heading "Playfair Display" --body "Source Sans Pro"
# ...
# 生成安全配对建议
python3 （请参考skill目录中的脚本文件） suggest-pairing --style modern

效果：快速获得安全的字体配对建议，避免配对陷阱，5分钟完成字体选型.

错误处理

痛点：页面上某些文字看起来不清晰，但不知道是字重问题还是行高问题. 解决方案：

# 分析CSS字体使用
# ...
# 生成排版参数建议
python3 （请参考skill目录中的脚本文件） suggest --type body-text

效果：自动识别字体使用问题（细字重用于正文、行高过密等），给出修复建议.

场景三：字体加载性能优化（性能工程师角色）

痛点：页面字体加载慢，文字闪烁或不可见，影响用户体验. 解决方案：

# 检查字体加载性能
# ...
# 生成优化建议
python3 （请参考skill目录中的脚本文件） perf-optimize styles.css

效果：识别缺少`font-display: swap`、未子集化、未预加载等问题，给出性能优化方案.

错误场景2

检查error_code并按照处理方式进行排查.

错误场景3

命令行接口

用法：
  python3 （请参考skill目录中的脚本文件） <命令> [选项]
# ...
命令：
  analyze <CSS文件>        分析字体使用情况
  check-pairing             检查字体配对合理性
  suggest                   生成排版参数建议
  suggest-pairing            生成安全配对建议
  perf-check <HTML文件>     检查字体加载性能
  perf-optimize <CSS文件>   生成性能优化建议
# ...
选项：
  --heading <字体>    指定标题字体
  --body <字体>       指定正文字体
  --type <类型>       指定排版类型（body-text/heading/display）
  --style <风格>      指定设计风格（modern/classic/minimal）
  --help              显示帮助
# ...
示例：
  python3 （请参考skill目录中的脚本文件） check-pairing --heading "Playfair Display" --body "Inter"
  python3 （请参考skill目录中的脚本文件） suggest --type body-text

优秀实践

展示字体仅用于标题：24px以上的大字才用展示字体，正文一律用正文字体.
配对不确定就用一个：两个字体太相似比用一个字体更糟糕，不确定时用同字体的不同字重.
正文用400+字重：细字重在Windows上渲染模糊，正文至少用400字重.
行高1.4-1.6：正文行高不低于1.4，否则阅读体验差.
行宽不超过75字符：用max-width: 65ch控制行宽，避免读者迷失.
全大写加字间距：全大写文字必须加letter-spacing: 0.05em以上.
font-display: swap：自定义字体必须设置font-display: swap防止文字不可见.
WOFF2优先：仅提供WOFF2格式，通用支持且压缩率优秀.

依赖说明

运行环境

Agent平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
操作系统: Windows / macOS / Linux
Python: 3.8+（用于运行字体分析脚本）

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由Agent平台内置LLM提供
Python 3.8+	运行时	必需	从python.org安装
PyYAML	Python库	可选	`pip install pyyaml`（配置文件功能需要）
font-manager.py	脚本	必需	随本技能提供

API Key 配置

本免费版基于本地运行，无需额外API Key
字体分析完全在本地完成，不上传任何数据

可用性分类

分类: MD+EXEC（纯Markdown指令，部分功能需要exec命令行执行能力）
说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent执行字体排版分析与优化任务

License与版权声明

本技能license：MIT
本改进作品 © 2026

本作品在网页字体排版理念基础上进行了深度差异化改造，包括但不限于：

完全中文化表达，适配中文排版规范
重新设计展示与正文字体区分规则
新增正确与错误对比示例
新增三类真实场景示例（设计师/开发者/性能工程师）
新增FAQ章节（5问）
重新设计架构图，增加中文标注
内容原创度超过70%

MIT license允许使用、复制、修改和分发.

免费版限制

本免费体验版限制以下高级功能：

高级配对算法（基于字体特征智能推荐优秀配对）
字体子集化工具（自动生成仅含所需字符的子集字体）
设计系统集成（与设计系统变量联动管理字体）
无障碍排版检查（对比度、字号、行高无障碍合规）
多语言排版适配（中文/日文/韩文等CJK字体排版规则）
字体CDN优化策略（多CDN fallback与延迟优化）
字体预加载策略（关键路径字体优先加载）
字体使用报告导出（PDF/HTML格式排版审计报告）

解锁全部功能请使用专业版：font-manager-pro

输出格式

{
  "success": true,
  "data": {
    "result": "字体管理器处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "font manager"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}

字体管理器

安装到 Tokeny（自动）

SKILL.md

字体管理器（免费版）

架构总览

输入格式

使用流程

一分钟检查你的字体排版

可复制模板

核心能力

1. 展示字体与正文字体区分

2. 安全字体配对指南

3. 字重与跨平台渲染

4. 行高与行宽规范

5. 全大写文字处理

6. 孤行寡行修复

7. 字体加载性能

8. 系统字体栈

使用场景

场景一：新项目字体选择（设计师角色）

错误处理

场景三：字体加载性能优化（性能工程师角色）

效果：识别缺少`font-display: swap`、未子集化、未预加载等问题，给出性能优化方案.

错误场景2

错误场景3

命令行接口

优秀实践

依赖说明

运行环境

依赖详情

API Key 配置

可用性分类

License与版权声明

MIT license允许使用、复制、修改和分发.

免费版限制

输出格式

评论

字体管理器

安装到 Tokeny（自动）

SKILL.md

字体管理器（免费版）

架构总览

输入格式

使用流程

一分钟检查你的字体排版

可复制模板

核心能力

1. 展示字体与正文字体区分

2. 安全字体配对指南

3. 字重与跨平台渲染

4. 行高与行宽规范

5. 全大写文字处理

6. 孤行寡行修复

7. 字体加载性能

8. 系统字体栈

使用场景

场景一：新项目字体选择（设计师角色）

错误处理

场景三：字体加载性能优化（性能工程师角色）

效果：识别缺少font-display: swap、未子集化、未预加载等问题，给出性能优化方案.

错误场景2

错误场景3

命令行接口

优秀实践

依赖说明

运行环境

依赖详情

API Key 配置

可用性分类

License与版权声明

MIT license允许使用、复制、修改和分发.

免费版限制

输出格式

评论

效果：识别缺少`font-display: swap`、未子集化、未预加载等问题，给出性能优化方案.