SuperAPI AI 工具集

font-extractor

设计与创作

查看项目

更新于 10-16 06:08

技能介绍

用途

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。