字体工具 字体子集化与 Webfont 生成 AI 提示词 (Prompts)

在线字体子集化与 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.

中文释义:生成一个字体版本回归检查站:对比两份字体的覆盖范围与度量差异,输出可下载报告用于上线前验收(强调指标与报告,不引导生成图片)。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功