在线字体子集化与 WOFF2 生成器
把上传的 TTF/OTF 按指定字符集做子集化,并输出 WOFF2/WOFF/TTF 及配套 CSS,面向网页加载优化与多语言站点。
英文 Prompt:
You are to build a production-ready web app: "Font Subsetter + Webfont Exporter".
Scope:
- Upload a TTF/OTF font.
- Input a character set (paste text) and/or choose presets (Latin, CJK, Emoji excluded).
- Generate a subset font and export: WOFF2 + WOFF + TTF.
- Generate CSS @font-face snippet and a preview page that renders sample text.
- Show before/after size, glyph count, and a downloadable ZIP.
Tech constraints:
- Frontend: Next.js 14 (App Router) + Type + Tailwind.
- Backend: Node.js API (Next route handler). Font processing must run server-side.
- Use a reliable font subsetting approach (e.g., Python fonttools in a container OR a Node-compatible library). Prefer a Docker-free, cross-platform solution; if native deps are required, document them clearly.
- Security: validate file type, size limits, no SSRF, no external network calls.
Deliverables (must output all):
1) Full project file tree.
2) Complete source code for every file.
3) Local run commands (dev + production build).
4) Deployment guide (Docker optional; include a non-Docker path).
5) At least 8 QA checks / test cases covering edge cases (invalid fonts, huge fonts, empty charset, CJK, etc.).
UX:
- Steps: upload -> set charset -> process -> download.
- Provide clear error messages and progress indicator.
中文释义:让 AI 直接产出一个可部署的在线字体子集化工具:支持上传字体、输入字符集、生成多格式 Webfont + CSS,并附带完整项目代码、运行命令、部署说明与 QA 清单。
在线 @font-face 与字体加载策略生成器
根据目标浏览器范围与性能偏好,自动生成可用的 CSS、预加载标签与加载策略说明,适合前端性能优化与多站点复用。
英文 Prompt:
Build a web app: "@font-face Generator + Loading Strategy Advisor".
Features:
- Inputs: font family name, file URLs or uploaded files, weights/styles, unicode-range optional, display strategy.
- Outputs:
- CSS @font-face blocks (with correct src order, format hints).
- HTML suggestions.
- A diagnostics panel that flags common mistakes (missing format, wrong MIME type, missing crossorigin, etc.).
- Provide a live preview area that renders the same text in fallback vs custom font.
Tech:
- React + Type . Use Vite.
- No server required (client-only) unless absolutely necessary.
- Include a "copy to clipboard" button and export as a single .css file.
Deliverables:
- Full file tree, complete code, run/build commands, deploy to static hosting.
- At least 10 QA checklist items (browser compatibility, copy correctness, unicode-range formatting, etc.).
中文释义:产出一个纯前端即可部署的在线 CSS 字体声明生成器:输入字体信息,输出可直接复制的 @font-face、预加载建议与错误诊断,并包含完整工程与 QA 列表。
在线字体授权与元数据检查器
解析字体的 name/OS2/版权信息,输出可读报告与“需看协议/可能可商用”提示,帮助团队在上线前做合规自查。
英文 Prompt:
Create a web app: "Font data & License Inspector".
Requirements:
- Upload TTF/OTF/WOFF/WOFF2.
- Parse and display data tables (name, OS/2, head, post) and key fields (copyright, vendor, version, fsType).
- Generate a JSON report and a human-readable report.
- Provide warnings when:
- fsType indicates embedding restrictions.
- name table missing required fields.
- unusual versioning or corrupted tables.
Tech:
- Backend: Node.js + Type (Express).
- Frontend: React + Type .
- Implement parsing using a robust library (fontkit/opentype.js or similar). If a format is unsupported, show a clear message.
Deliverables:
- Full project, file tree, all code, run commands, deployment guide.
- Include unit tests for parsers and 8 QA cases (bad file, wrong extension, woff2 parsing, large file, etc.).
Note:
- Do not claim legal certainty; only present extracted fields and cautious warnings.
中文释义:让 AI 生成一个可部署的字体元数据检查站:上传字体后解析关键信息并导出报告,用于上线前的授权与元数据自查(只做提示,不做法律结论)。
在线字体预览与字符覆盖率报告
输入一段文本,工具会检测字体是否覆盖这些字符,并输出缺失字符清单与覆盖率,适合多语言 UI 与内容平台。
英文 Prompt:
Build an online tool: "Font Coverage Checker".
Capabilities:
- Upload one or multiple fonts.
- Paste a text block; detect which characters are supported by each font.
- Output:
- Coverage percentage.
- Missing characters list (grouped by Unicode blocks).
- A downloadable report (JSON + HTML).
Tech:
- Next.js + Type .
- Perform parsing server-side for reliability.
- Add caching by hashing font file content.
Deliverables:
- Full code , file tree, commands, deployment.
- At least 8 QA/test cases including mixed s, surrogate pairs, and very long text.
中文释义:产出一个能跑起来的在线字符覆盖率检查工具:上传字体、粘贴文本即可得到覆盖率与缺字报告,并提供可下载的 JSON/HTML 报告与 QA 用例。
在线字体文件批量重命名与规范化工具
把一批字体按约定规则重命名(family/weight/style),并生成一致的文件结构与清单,适合设计资产管理与前端集成。
英文 Prompt:
Create a web tool: "Batch Font Renamer & Manifest Builder".
Flow:
- Upload multiple font files (drag & drop).
- Detect family/weight/style from data.
- Allow mapping rules (e.g., 400=Regular, 700=Bold; italic naming).
- Output a ZIP containing:
- normalized filenames
- a generated manifest.json
- a ready-to-use CSS file
Tech:
- Frontend-only if possible using Web Workers.
- If backend is needed, use Node + Express with multipart upload.
Deliverables:
- Full project, build/run commands, deployment instructions.
- Provide 10 QA items (duplicate names, missing data, mixed formats, etc.).
中文释义:让 AI 生成一个批处理字体资产整理工具:识别元数据并按规则重命名,导出 ZIP(含 manifest.json + CSS),用于团队资产规范化与工程接入。
在线字体格式转换与压缩策略工具
把 TTF/OTF 转换为适合 Web 的 WOFF2/WOFF,并给出压缩、缓存与 MIME 配置建议,面向站点性能与兼容性。
英文 Prompt:
Build a web app: "Font Converter (TTF/OTF -> WOFF2/WOFF) + Hosting Guide".
Requirements:
- Upload TTF/OTF; convert to WOFF2 and WOFF.
- Display size comparisons.
- Generate server config snippets for correct Content-Type and caching:
- Nginx
- Apache
- Vercel/Netlify headers
Tech:
- Node.js backend with a conversion pipeline.
- Include clear install notes for any native dependencies.
Deliverables:
- Full code, file tree, commands.
- Deployment guide and 8 QA checks.
中文释义:产出一个可部署的在线字体转换工具:完成格式转换、展示体积对比,并附带常见平台的 MIME/缓存配置建议与 QA 清单。
在线字体子集化规则生成与 unicode-range 计算器
根据语言/页面路径/字符样本生成子集化规则,并自动计算 unicode-range,适合多语言站点按需加载。
英文 Prompt:
Create an online tool: "Unicode-Range Calculator + Subset Rules Generator".
Features:
- Input: sample text OR upload text files.
- Output:
- deduplicated code points
- merged unicode-range ranges formatted for CSS
- suggested subset groups (latin/cjk/punctuation) d on Unicode blocks
- Export as JSON and CSS snippets.
Tech:
- Pure frontend (React + Type ) with Web Worker for performance.
Deliverables:
- Full project with code, run/build commands, deployment.
- At least 10 QA items including large input size and surrogate pairs.
中文释义:让 AI 输出一个纯前端可部署的小工具:输入文本即可得到可直接用于 CSS 的 unicode-range 与子集化规则建议,并包含完整工程与 QA 清单。
在线字体回归测试与渲染对比工具(非出图)
对比同一段文本在不同字体版本下的渲染差异,输出基于指标的检查报告(如缺字、字宽变化、回退发生),用于发布前质量把关。
英文 Prompt:
Build a web tool: "Font Regression Checker".
Goal:
- Compare two font files (old vs new) for the same family.
- Input sample text.
- Output a report focusing on measurable checks WITHOUT generating or requesting new images:
- missing glyphs
- changed glyph metrics (advance width deltas)
- changed kerning pairs
- changed unicode coverage
- Provide downloadable JSON report and a simple HTML report.
Tech:
- Backend: Node.js + Type .
- Frontend: React + Type .
Deliverables:
- File tree, complete code, commands, deployment.
- At least 8 QA/test cases including malformed fonts and large fonts.
中文释义:生成一个字体版本回归检查站:对比两份字体的覆盖范围与度量差异,输出可下载报告用于上线前验收(强调指标与报告,不引导生成图片)。