字体管理器

提供网页字体选择、配对、安全字重、行高行宽及加载性能的排版检查与优化，防止常见字体使用错误。

Install

openclaw skills install @thcjp/font-manager-free

字体管理器（免费版）

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

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

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

架构总览

输入格式

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

text

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

使用流程

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

一分钟检查你的字体排版

bash

# 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

可复制模板

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

markdown

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

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小字号阅读 → 正文字体，可用于段落

错误示例：

css

/* 错误：展示字体用于正文 */
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+
深色背景上的浅色文字看起来更细，字重提升一级
伪粗体（浏览器生成）不正确，只用字体实际包含的字重
检查字体是否有斜体，伪斜体（倾斜的罗马体）效果明显更差

css

/* 正确：使用字体实际包含的字重 */
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单位设置容器最大宽度

css

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

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

5. 全大写文字处理

css

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

规则：

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

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

6. 孤行寡行修复

css

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

修复方法：

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

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

7. 字体加载性能

css

/* 防止字体加载时文字不可见 */
@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. 系统字体栈

css

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

系统字体优势：

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

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

使用场景

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

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

bash

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

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

错误处理

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

bash

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

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

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

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

bash

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

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

错误场景2

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

错误场景3

命令行接口

text

用法：
  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

输出格式

json

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

字体管理器

Install

字体管理器（免费版）

架构总览

输入格式

使用流程

一分钟检查你的字体排版

可复制模板

核心能力

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

2. 安全字体配对指南

3. 字重与跨平台渲染

4. 行高与行宽规范

5. 全大写文字处理

6. 孤行寡行修复

7. 字体加载性能

8. 系统字体栈

使用场景

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

错误处理

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

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

错误场景2

错误场景3

命令行接口

优秀实践

依赖说明

运行环境

依赖详情

API Key 配置

可用性分类

License与版权声明

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

免费版限制

输出格式

Related skills

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