在线字体子集化(Subset)与 WOFF2 打包工具
把大体积 TTF/OTF 字体按指定字符集裁剪成更小的子集,并一键输出 WOFF2/CSS/示例页。
英文 Prompt:
You are to generate a complete, runnable web app that subsets font files to reduce size.
Requirements:
- Build a full-stack project with a React UI (Vite) + Node.js API (Express) in a single repo.
- Features:
1) Upload TTF/OTF/WOFF/WOFF2.
2) Choose subset mode: (a) custom characters textarea, (b) range presets (Basic Latin, CJK common), (c) auto-detect from pasted text.
3) Produce subset output formats: WOFF2 + WOFF + TTF (as available).
4) Generate @font-face CSS and an HTML preview page.
5) Show before/after file sizes and glyph counts.
- Implementation guidance:
- Use fontkit (or similar) for parsing and subsetting; if a toolchain is needed, include it in the repo.
- Validate inputs; reject non-font files.
- Handle large uploads (up to 30MB) with streaming and size limits.
- Store jobs in a temp folder and clean up automatically.
- Deliverables:
- A clear file tree.
- Full source code for UI and API.
- `npm install` / `npm run dev` commands.
- Production build and deployment notes (Docker + a simple reverse proxy config).
- Tests: at least 5 checks (unit or integration) OR a QA checklist covering edge cases.
- Provide sample fonts as download s only (do not embed copyrighted font binaries).
中文释义:
生成一个可部署的“字体子集化工作台”在线工具:支持上传字体,按字符集裁剪、转成 WOFF2,并输出可直接复制使用的 CSS 与预览页;同时给出完整工程结构、命令、Docker 部署与测试/QA 清单,确保别人拉取代码就能跑起来。
字体信息抽取与对比(Name/OS2/版权/字形覆盖)仪表盘
快速读取字体的元信息与字形覆盖,并对两份字体做差异对比,避免上线踩坑。
英文 Prompt:
Create a runnable web app that extracts and compares font data.
Stack:
- Next.js (App Router) + Type .
- Use a server route for parsing; do not parse on the client only.
Features:
1) Upload two fonts and compare:
- name table fields (family, subfamily, full name)
- OS/2 metrics (weight class, unicode range flags)
- copyright/license strings
- glyph count and supported code points
2) Render a table diff with highlights.
3) Provide a “risk checklist” section that flags common issues:
- missing WOFF2
- mismatched family naming
- suspicious license text
- inconsistent weight/italic flags
4) Provide JSON export for CI usage.
Deliverables:
- Full repo code, file tree, and commands.
- A minimal Dockerfile and a `docker compose` example.
- Tests: at least 5 checks (can be API route tests) OR a QA checklist.
中文释义:
生成一个“字体体检 + 对比”在线工具:上传两份字体后一键对比命名表、OS/2 参数、授权字符串、字形覆盖,并给出风险提示与可导出的 JSON,方便接入上线前的审查流程。
字体预览与排版样式生成器(多行、多字号、多语言)
面向设计走查与前端接入:在线预览字体在不同字号/字重/行高/字距下的真实效果,并生成可复用样式片段。
英文 Prompt:
Build a complete web app that previews fonts and generates typography CSS snippets.
Requirements:
- Single repo: SvelteKit + Type .
- Upload a font; generate an in-memory @font-face using URLs.
- Controls:
- font-size, line-height, letter-spacing, font-weight (if variable), font-feature-settings.
- sample text presets: English paragraphs, Chinese paragraphs, code blocks.
- multi-column comparison and saved presets.
- Output:
- Copyable CSS and HTML snippet.
- Export a JSON preset file; import it back.
- Deliverables:
- File tree + all code.
- Run commands and deployment notes.
- QA checklist with at least 5 items (including mobile viewport issues).
中文释义:
生成一个可运行的字体预览站:上传字体后可调字号/行高/字距/特性并做多列对比,自动生成可复制的 CSS/HTML 片段,并支持预设导入导出,给到完整项目与 QA 清单。
变量字体(Variable Font)轴向探索与实例导出工具
针对可变字体:在线查看轴(wght/wdth/opsz 等),拖动滑块生成实例,并导出静态字体文件与 CSS。
英文 Prompt:
Generate a complete web tool for exploring variable fonts.
Stack:
- React + Type + Vite.
- Node.js API for heavy processing.
Features:
1) Upload variable font (TTF/OTF/WOFF2).
2) Detect variation axes and show sliders with min/default/max.
3) Live preview text updates.
4) Export:
- CSS `font-variation-settings` snippet.
- A static instance font file produced from selected axis values.
5) Explain limitations and include a troubleshooting section.
Deliverables:
- Full code + file tree.
- Commands to run locally.
- Docker deployment.
- Tests/QA checklist (>=5) including axis edge cases.
中文释义:
生成一个“变量字体轴向探索器”:上传可变字体后自动识别轴并滑块预览,支持导出静态实例字体与 CSS 片段,附带部署与测试/QA,确保可直接上线自用或交付。
字体授权与来源字段规范化检查器(文本扫描)
把字体文件中可疑的版权/授权文本、命名不一致等问题提前曝光,生成检查报告。
英文 Prompt:
Create a runnable web app that scans a font for license/copyright text and naming consistency.
Requirements:
- Backend: Python FastAPI.
- Frontend: simple HTML/JS (no framework required).
- When a font is uploaded, extract:
- name table strings
- license/copyright strings
- vendor ID and version
- Generate a report with:
- warnings for empty or placeholder license
- mismatched family/subfamily naming
- suspicious strings (regex rules)
- Provide downloadable report as JSON and Markdown.
Deliverables:
- Repo file tree.
- Full code.
- Run commands using `uv` or `pip`.
- Docker deployment notes.
- QA checklist (>=5).
中文释义:
生成一个可部署的“字体授权体检器”:上传字体后抽取 name 表与授权字符串,按规则输出告警与报告,并支持导出 JSON/Markdown,附带 Docker 与 QA 清单,方便团队在发布前统一审查。
字体文件批量转换与归档流水线(在线队列)
把多份字体批量转换成统一格式(如 WOFF2),并生成归档 ZIP、日志与失败重试。
英文 Prompt:
Build a complete web app that batch converts fonts with a job queue.
Stack:
- NestJS (Node) backend + BullMQ + Redis.
- Minimal React admin UI.
Features:
1) Upload multiple font files (drag-and-drop).
2) Create conversion jobs: output formats WOFF2/WOFF/TTF (when possible).
3) Queue processing with progress updates, retry, and logs.
4) Download results as a ZIP.
5) Admin page: view recent jobs, statuses, and error stack traces.
Deliverables:
- Full code + file tree.
- Local run instructions (including Redis via Docker).
- Deployment guide.
- Tests/QA checklist >=5 (e.g., corrupted fonts, large batches, cancellation).
中文释义:
生成一个可运行的“字体批处理转换工作台”:支持批量上传、队列转码、进度与日志、失败重试,并一键打包下载;给出完整工程、Redis/Docker 运行方式与测试/QA,确保能稳定处理大批量文件。
字体子集化规则生成器(按页面真实用字统计)
输入网站页面 URL 或粘贴 HTML/CSS,统计实际用字与字形覆盖,自动生成子集化配置,避免误删字符。
英文 Prompt:
Generate a complete web tool that helps create safe font subsetting rules from real content.
Stack:
- Remix + Type .
- A backend route fetches a URL, extracts visible text (basic heuristics), and computes a unique character set.
Features:
1) Inputs:
- paste plain text
- paste HTML
- fetch a URL (with allowlist + timeout)
2) Output:
- unique character list
- counts and top characters
- export formats: JSON, plain text, and a config snippet compatible with the subsetting tool you generated earlier
3) Safety:
- SSRF protection (allowlist domains, block private IPs)
- size limits and timeouts
Deliverables:
- Full code, file tree, commands.
- Deployment notes.
- Tests/QA checklist >=5 including SSRF and extraction edge cases.
中文释义:
生成一个“用字统计 + 子集规则生成器”:通过粘贴文本/HTML 或抓取指定页面,提取可见文字并生成安全的字符集与配置,包含 SSRF 防护、限制与 QA 清单,确保工具可直接部署使用。
字体回归测试页面生成器(截图对比 + 断言清单)
把字体升级的风险变成可执行的回归流程:自动生成测试页面、断言清单,并支持截图对比。
英文 Prompt:
Create a runnable project that generates font regression test pages and provides a screenshot-diff workflow.
Stack:
- Node.js CLI inside the same repo + a small web UI.
Features:
1) Upload a font and choose test strings (multilingual, punctuation, currency, code).
2) Generate a static test site with multiple cases:
- sizes, weights, line-heights
- fallback stacks
- OpenType features toggles
3) Provide a Playwright that:
- starts the site
- takes screenshots
- compares against line
- outputs a report
Deliverables:
- File tree + full code.
- Commands to run the site and run Playwright.
- Deployment notes.
- Tests/QA checklist >=5.
中文释义:
生成一个“字体回归测试套件生成器”:在线选择测试字串后自动产出静态测试站点与 Playwright 截图对比脚本,附带运行命令、部署说明与 QA 清单,让字体升级可以像代码一样做回归。