用途
Font Extractor 用于从网站上提取所有使用的字体,并将它们保存到本地,按字体族进行分类整理。当用户想要抓取、提取或下载某个网站的字体时,可以使用该技能。
主要能力
- 确认字体保存位置,默认使用 ./fonts/。
- 从网站中查找并下载所有字体文件。
- 运行内置脚本,将下载的字体整理到按字体族划分的子目录中。
- 字体族的识别通过读取每个字体文件内部的名称表完成,无需解析 CSS 的 family 名称。
使用方式
Step 0:确认输出位置
在下载之前,询问用户希望将字体保存到哪里。如果用户没有偏好,默认使用 ./fonts/。在后续步骤中,使用用户选择的路径替代 ./fonts/。
Step 1:下载所有字体文件
获取页面 HTML 并找出字体文件 URL。可使用最快的方式完成:
- 解析
<link rel="stylesheet">标签,获取每个 CSS 文件,并从 @font-face 块中提取 url(...) 值 - 检查
<link rel="preload" as="font">标签 - 搜索内联
<style>块 - 如果 CSS 中没有找到,则搜索 JS 打包文件中的字体文件 URL(SPA 常将字体嵌入其中)
- 如果使用 Claude-in-Chrome(mcp__claude-in-chrome__*),read_network_requests 可以捕获动态加载的字体
需要查找的字体文件扩展名:.woff2、.woff、.ttf、.otf、.eot。
将找到的每个字体文件 URL 下载到 ./fonts/(平铺存放)。使用 curl -L 并带上与页面 URL 匹配的 Referer 请求头——许多 CDN 需要它:
mkdir -p ./fonts
curl -L -H "Referer: <page-url>" -o "./fonts/<filename>" "<font-url>"
下载所有唯一的 URL。不要去重——不同的 URL 可能是同一字体的不同版本或格式,用户可能希望保留全部。
Step 2:按字体族整理
运行内置的整理脚本。它会读取每个字体文件的内部元数据来确定其字体族名称,然后将文件移动到 ./fonts/<family>/ 子目录中:
uv run ~/git/agent-skills/font-extractor/scripts/organize_fonts.py ./fonts
该脚本会处理所有事情:读取字体名称表、创建字体族目录、移动文件。无法读取字体族的字体会被命名为 Unknown-1、Unknown-2 等。
Step 3:报告
向用户展示下载了什么:
find ./fonts -type f | sort
同时报告字体族数量、文件数量和总大小。
适用场景
- 需要抓取某个网站使用的字体资源。
- 希望将网页字体下载到本地并按字体族整理保存。
- 需要为离线使用或字体分析收集字体文件。
限制
资料中未提供关于支持平台、收费情况、价格或效果保证的明确信息。字体族识别依赖字体文件内部名称表,无法读取的字体将被归为 Unknown-N。