diff --git a/README.en.md b/README.en.md index 3f04b98..5e1d427 100644 --- a/README.en.md +++ b/README.en.md @@ -1,4 +1,4 @@ -# WebFont — Runtime Font Delivery + AI Typography Skill +# WebFont — Runtime Font Delivery + AI Chinese Font Skill > Subset Chinese fonts on demand — 6 characters ≈ 6KB. Use premium Chinese fonts on any web page. @@ -32,7 +32,7 @@ This project subsets fonts on the server side — pass in the text you need, get ## Features -> [Live Typography Skill Demo](https://webfont.shenzilong.cn/) — same content, different fonts, completely different feel +> [Live Font Demo](https://webfont.shenzilong.cn/) — same content, different fonts, completely different feel ### Runtime Font Delivery @@ -61,30 +61,13 @@ JS SDK with three loading modes: All modes share the same character set per font — zero duplicate requests, zero flicker. -### Typography Presets +### AI Chinese Font Skill -Pre-defined font style configs for common scenarios: - -| Preset | Style | Heading | Body | Use Cases | -|--------|-------|---------|------|-----------| -| zen | Oriental / Zen | Noto Serif CJK SC | LXGW WenKai | Tea, culture, meditation | -| luxury | Luxury / High-end | Noto Serif CJK SC | Noto Serif CJK SC | Brand sites, fashion | -| editorial | Editorial / Content | Noto Serif CJK SC | Noto Sans CJK SC | News, blogs, magazines | -| modern-tech | Modern Tech | Alibaba PuHuiTi | Noto Sans CJK SC | SaaS, dev tools | -| cyberpunk | Cyberpunk | ZCOOL KuaiLe | Noto Sans CJK SC | Games, street culture | -| minimal | Minimal | Noto Sans CJK SC | Noto Sans CJK SC | Portfolios, design | -| warm | Warm / Humanistic | LXGW WenKai | LXGW WenKai | Education, community | -| startup | Startup Energy | Noto Sans CJK SC Bold | Noto Sans CJK SC | Startups, events | - -Each preset includes font pairing, type scale, line height, spacing, fallback chain, runtime strategy, and ready-to-use CSS. - -### AI Typography Skill - -Inject Chinese typography intelligence into AI (Claude, Cursor, Copilot, etc.). With the Skill Prompt, AI can: +Inject Chinese font application capability into AI (Claude, Cursor, Copilot, etc.). With the Skill Prompt, AI can: - Auto-select fonts matching the scene - Handle Chinese-English mixed typesetting -- Build proper typography hierarchy +- Build proper font hierarchy - Generate fallback chains and runtime loading strategies ``` @@ -92,7 +75,7 @@ Prompt: "Build a zen-style tea brand website" Without Skill: font-family: sans-serif → system default → looks generic -With Skill: zen preset → serif heading + kai body → auto subset → visual quality leap +With Skill: zen style → serif heading + kai body → auto subset → visual quality leap ``` ## Quick Start @@ -153,8 +136,8 @@ Font name supports fuzzy matching: exact → prefix → contains. └──────────────────────────┬───────────────────────────────────┘ │ ┌────────────┴────────────┐ - │ Typography Presets │ ← Font style configs - │ + AI Skill Prompt │ ← Chinese typography intelligence + │ AI Chinese Font Skill │ ← Chinese font application + │ + AI Skill Prompt │ ← Chinese font application └────────────┬────────────┘ │ ┌────────────┴────────────┐ @@ -180,7 +163,7 @@ web-font/ ├── src/ # Frontend: Vue 3 SPA ├── public/ │ └── webfont-sdk.js # Runtime Font Delivery SDK -├── skills/ # AI Typography Skill Prompts +├── skills/ # AI Chinese Font Skill ├── examples/ # Before/After demo pages └── vendor/ # fonteditor-core ``` diff --git a/README.md b/README.md index 552e37d..70daee0 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ ## 核心能力 -> [在线体验 Typography Skill Demo](https://webfont.shenzilong.cn/?demo) — 同一内容，字体不同，体验天壤之别 +> [在线体验中文字体效果对比](https://webfont.shenzilong.cn/?demo) — 同一内容，字体不同，体验天壤之别 ### Runtime Font Delivery @@ -61,13 +61,13 @@ JS SDK 三种加载模式： 同一字体下所有模式共享字符集，零重复请求，零闪烁。 -### AI Typography Skill +### AI Chinese Font Skill -给 AI（Claude、Cursor、Copilot 等）注入中文排版智能。AI 读取 Skill Prompt 后可以： +给 AI（Claude、Cursor、Copilot 等）注入中文字体应用能力。AI 读取 Skill Prompt 后可以： - 自动选择匹配场景的中文字体 - 正确处理中英混排 -- 建立字体层级（Typography Hierarchy） +- 建立字体层级（Font Hierarchy） - 生成 fallback 链和 Runtime 加载策略 ``` @@ -136,8 +136,8 @@ services: └──────────────────────────┬───────────────────────────────────┘ │ ┌────────────┴────────────┐ - │ Typography Presets │ ← 字体风格配置 - │ + AI Skill Prompt │ ← 中文排版智能 + │ AI Chinese Font Skill │ ← 中文字体应用能力 + │ + Skill Prompt │ ← 字体裁剪 + 加载策略 └────────────┬────────────┘ │ ┌────────────┴────────────┐ @@ -163,7 +163,7 @@ web-font/ ├── src/ # 前端：Vue 3 单页应用 ├── public/ │ └── webfont-sdk.js # Runtime Font Delivery SDK -├── skills/ # AI Typography Skill Prompts +├── skills/ # AI Chinese Font Skill ├── examples/ # Before/After 对比演示 └── vendor/ # fonteditor-core ``` diff --git a/skills/chinese-web-typography.md b/skills/chinese-web-font.md similarity index 91% rename from skills/chinese-web-typography.md rename to skills/chinese-web-font.md index 5dd551d..ef4c1b8 100644 --- a/skills/chinese-web-typography.md +++ b/skills/chinese-web-font.md @@ -1,9 +1,9 @@ --- -name: chinese-web-typography -description: 设计精美网页时，可利用此技能引入中文字体、中文排版规范、字体裁剪 API 等元素，提升中文页面的排版品质。 +name: chinese-web-font +description: 中文字体按需裁剪与加载能力，可让 AI 在生成中文网页时引入特殊中文字体，按字符子集化加载，极大减少流量。 --- -# Chinese Web Typography Skill +# Chinese Web Font Skill ## WebFont API @@ -60,7 +60,7 @@ SDK 支持文字动态变化：当 DOM 内容改变时，`observeFont` 会自动 - **字重**：中文 400/700 区分明显，中间字重（300/500）表现弱，不要依赖 - **中英混排**：中文与英文/数字之间加空格 - **字号级差**：标题间至少 4px 差距，否则层级模糊 -- **首行缩进**：`text-indent: 2em` 是中文正文排版的传统 +- **首行缩进**：`text-indent: 2em` 是中文正文的传统 ## 可用字体 diff --git a/src/App.vue b/src/App.vue index 53af061..695431e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -218,7 +218,7 @@ async function refreshFonts() { { - {{ t('demoSlogan') }} · {{ t('viewSkillLink') }} + {{ t('demoSlogan') }} · {{ t('viewSkillLink') }}
diff --git a/src/i18n.ts b/src/i18n.ts index bc13a8b..20720c8 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -45,7 +45,7 @@ const messages = { buyCoffee: "觉得好用？", buyCoffeeAction: "请作者喝杯咖啡", buyCoffeeSuffix: "，支持持续开发", - viewSkill: "查看 AI Typography Skill →", + viewSkill: "查看 AI Chinese Font Skill →", sponsor: "赞助支持", agentSkillDemo: "Agent Skill Demo", @@ -113,7 +113,7 @@ const messages = { buyCoffee: "Find it useful? ", buyCoffeeAction: "Buy the author a coffee", buyCoffeeSuffix: " to support development", - viewSkill: "View AI Typography Skill →", + viewSkill: "View AI Chinese Font Skill →", sponsor: "Sponsor", agentSkillDemo: "Agent Skill Demo",