mirror of
https://github.com/2234839/web-font.git
synced 2026-06-04 16:43:53 +08:00
refactor: 重命名 Skill 为 chinese-web-font,聚焦中文字体应用
- skills/chinese-web-typography.md → skills/chinese-web-font.md - 移除路线图(不写规划) - 移除英文 README 中不存在的 Typography Presets 表格 - 统一文案:Typography Skill → Chinese Font Skill Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5dab3d6d93
commit
13787dfd22
35
README.en.md
35
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.
|
> 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
|
## 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
|
### 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.
|
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:
|
Inject Chinese font application capability into AI (Claude, Cursor, Copilot, etc.). With the Skill Prompt, AI can:
|
||||||
|
|
||||||
| 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:
|
|
||||||
|
|
||||||
- Auto-select fonts matching the scene
|
- Auto-select fonts matching the scene
|
||||||
- Handle Chinese-English mixed typesetting
|
- Handle Chinese-English mixed typesetting
|
||||||
- Build proper typography hierarchy
|
- Build proper font hierarchy
|
||||||
- Generate fallback chains and runtime loading strategies
|
- 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
|
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
|
## Quick Start
|
||||||
@ -153,8 +136,8 @@ Font name supports fuzzy matching: exact → prefix → contains.
|
|||||||
└──────────────────────────┬───────────────────────────────────┘
|
└──────────────────────────┬───────────────────────────────────┘
|
||||||
│
|
│
|
||||||
┌────────────┴────────────┐
|
┌────────────┴────────────┐
|
||||||
│ Typography Presets │ ← Font style configs
|
│ AI Chinese Font Skill │ ← Chinese font application
|
||||||
│ + AI Skill Prompt │ ← Chinese typography intelligence
|
│ + AI Skill Prompt │ ← Chinese font application
|
||||||
└────────────┬────────────┘
|
└────────────┬────────────┘
|
||||||
│
|
│
|
||||||
┌────────────┴────────────┐
|
┌────────────┴────────────┐
|
||||||
@ -180,7 +163,7 @@ web-font/
|
|||||||
├── src/ # Frontend: Vue 3 SPA
|
├── src/ # Frontend: Vue 3 SPA
|
||||||
├── public/
|
├── public/
|
||||||
│ └── webfont-sdk.js # Runtime Font Delivery SDK
|
│ └── webfont-sdk.js # Runtime Font Delivery SDK
|
||||||
├── skills/ # AI Typography Skill Prompts
|
├── skills/ # AI Chinese Font Skill
|
||||||
├── examples/ # Before/After demo pages
|
├── examples/ # Before/After demo pages
|
||||||
└── vendor/ # fonteditor-core
|
└── vendor/ # fonteditor-core
|
||||||
```
|
```
|
||||||
|
|||||||
14
README.md
14
README.md
@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
## 核心能力
|
## 核心能力
|
||||||
|
|
||||||
> [在线体验 Typography Skill Demo](https://webfont.shenzilong.cn/?demo) — 同一内容,字体不同,体验天壤之别
|
> [在线体验中文字体效果对比](https://webfont.shenzilong.cn/?demo) — 同一内容,字体不同,体验天壤之别
|
||||||
|
|
||||||
### Runtime Font Delivery
|
### 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 加载策略
|
- 生成 fallback 链和 Runtime 加载策略
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -136,8 +136,8 @@ services:
|
|||||||
└──────────────────────────┬───────────────────────────────────┘
|
└──────────────────────────┬───────────────────────────────────┘
|
||||||
│
|
│
|
||||||
┌────────────┴────────────┐
|
┌────────────┴────────────┐
|
||||||
│ Typography Presets │ ← 字体风格配置
|
│ AI Chinese Font Skill │ ← 中文字体应用能力
|
||||||
│ + AI Skill Prompt │ ← 中文排版智能
|
│ + Skill Prompt │ ← 字体裁剪 + 加载策略
|
||||||
└────────────┬────────────┘
|
└────────────┬────────────┘
|
||||||
│
|
│
|
||||||
┌────────────┴────────────┐
|
┌────────────┴────────────┐
|
||||||
@ -163,7 +163,7 @@ web-font/
|
|||||||
├── src/ # 前端:Vue 3 单页应用
|
├── src/ # 前端:Vue 3 单页应用
|
||||||
├── public/
|
├── public/
|
||||||
│ └── webfont-sdk.js # Runtime Font Delivery SDK
|
│ └── webfont-sdk.js # Runtime Font Delivery SDK
|
||||||
├── skills/ # AI Typography Skill Prompts
|
├── skills/ # AI Chinese Font Skill
|
||||||
├── examples/ # Before/After 对比演示
|
├── examples/ # Before/After 对比演示
|
||||||
└── vendor/ # fonteditor-core
|
└── vendor/ # fonteditor-core
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
---
|
---
|
||||||
name: chinese-web-typography
|
name: chinese-web-font
|
||||||
description: 设计精美网页时,可利用此技能引入中文字体、中文排版规范、字体裁剪 API 等元素,提升中文页面的排版品质。
|
description: 中文字体按需裁剪与加载能力,可让 AI 在生成中文网页时引入特殊中文字体,按字符子集化加载,极大减少流量。
|
||||||
---
|
---
|
||||||
|
|
||||||
# Chinese Web Typography Skill
|
# Chinese Web Font Skill
|
||||||
|
|
||||||
## WebFont API
|
## WebFont API
|
||||||
|
|
||||||
@ -60,7 +60,7 @@ SDK 支持文字动态变化:当 DOM 内容改变时,`observeFont` 会自动
|
|||||||
- **字重**:中文 400/700 区分明显,中间字重(300/500)表现弱,不要依赖
|
- **字重**:中文 400/700 区分明显,中间字重(300/500)表现弱,不要依赖
|
||||||
- **中英混排**:中文与英文/数字之间加空格
|
- **中英混排**:中文与英文/数字之间加空格
|
||||||
- **字号级差**:标题间至少 4px 差距,否则层级模糊
|
- **字号级差**:标题间至少 4px 差距,否则层级模糊
|
||||||
- **首行缩进**:`text-indent: 2em` 是中文正文排版的传统
|
- **首行缩进**:`text-indent: 2em` 是中文正文的传统
|
||||||
|
|
||||||
## 可用字体
|
## 可用字体
|
||||||
|
|
||||||
@ -218,7 +218,7 @@ async function refreshFonts() {
|
|||||||
<footer style="margin-top: 48px; padding-top: 16px; border-top: 1px solid #eee; font-size: 12px; color: #999; text-align: center">
|
<footer style="margin-top: 48px; padding-top: 16px; border-top: 1px solid #eee; font-size: 12px; color: #999; text-align: center">
|
||||||
<p>{{ t('thanks') }}<a href="https://www.ruanyifeng.com/blog/2020/03/weekly-issue-100.html" target="_blank" rel="noopener noreferrer" style="color: #999">阮一峰科技爱好者周刊(第 100 期)</a> {{ t('thanksText') }}</p>
|
<p>{{ t('thanks') }}<a href="https://www.ruanyifeng.com/blog/2020/03/weekly-issue-100.html" target="_blank" rel="noopener noreferrer" style="color: #999">阮一峰科技爱好者周刊(第 100 期)</a> {{ t('thanksText') }}</p>
|
||||||
<p style="margin-top: 8px">{{ t('buyCoffee') }}<a href="https://shenzilong.cn/%E5%85%B3%E4%BA%8E/%E8%B5%9E%E5%8A%A9.html#" target="_blank" rel="noopener noreferrer" style="color: #e6a700; text-decoration: underline">{{ t('buyCoffeeAction') }}</a>{{ t('buyCoffeeSuffix') }}</p>
|
<p style="margin-top: 8px">{{ t('buyCoffee') }}<a href="https://shenzilong.cn/%E5%85%B3%E4%BA%8E/%E8%B5%9E%E5%8A%A9.html#" target="_blank" rel="noopener noreferrer" style="color: #e6a700; text-decoration: underline">{{ t('buyCoffeeAction') }}</a>{{ t('buyCoffeeSuffix') }}</p>
|
||||||
<p style="margin-top: 12px"><a href="https://github.com/2234839/web-font/blob/new/skills/chinese-web-typography.md" target="_blank" style="color: #8b7355; text-decoration: underline">{{ t('viewSkill') }}</a></p>
|
<p style="margin-top: 12px"><a href="https://github.com/2234839/web-font/blob/new/skills/chinese-web-font.md" target="_blank" style="color: #8b7355; text-decoration: underline">{{ t('viewSkill') }}</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
|
|||||||
@ -38,7 +38,7 @@ onMounted(() => {
|
|||||||
<button @click="props.onBack" style="padding: 6px 16px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px">
|
<button @click="props.onBack" style="padding: 6px 16px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px">
|
||||||
{{ t('back') }}
|
{{ t('back') }}
|
||||||
</button>
|
</button>
|
||||||
<span style="font-size: 13px; color: #888">{{ t('demoSlogan') }} · <a href="https://github.com/2234839/web-font/blob/new/skills/chinese-web-typography.md" target="_blank" style="color: #8b7355; text-decoration: none">{{ t('viewSkillLink') }}</a></span>
|
<span style="font-size: 13px; color: #888">{{ t('demoSlogan') }} · <a href="https://github.com/2234839/web-font/blob/new/skills/chinese-web-font.md" target="_blank" style="color: #8b7355; text-decoration: none">{{ t('viewSkillLink') }}</a></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; min-height: calc(100vh - 49px)">
|
<div style="display: flex; min-height: calc(100vh - 49px)">
|
||||||
|
|||||||
@ -45,7 +45,7 @@ const messages = {
|
|||||||
buyCoffee: "觉得好用?",
|
buyCoffee: "觉得好用?",
|
||||||
buyCoffeeAction: "请作者喝杯咖啡",
|
buyCoffeeAction: "请作者喝杯咖啡",
|
||||||
buyCoffeeSuffix: ",支持持续开发",
|
buyCoffeeSuffix: ",支持持续开发",
|
||||||
viewSkill: "查看 AI Typography Skill →",
|
viewSkill: "查看 AI Chinese Font Skill →",
|
||||||
sponsor: "赞助支持",
|
sponsor: "赞助支持",
|
||||||
agentSkillDemo: "Agent Skill Demo",
|
agentSkillDemo: "Agent Skill Demo",
|
||||||
|
|
||||||
@ -113,7 +113,7 @@ const messages = {
|
|||||||
buyCoffee: "Find it useful? ",
|
buyCoffee: "Find it useful? ",
|
||||||
buyCoffeeAction: "Buy the author a coffee",
|
buyCoffeeAction: "Buy the author a coffee",
|
||||||
buyCoffeeSuffix: " to support development",
|
buyCoffeeSuffix: " to support development",
|
||||||
viewSkill: "View AI Typography Skill →",
|
viewSkill: "View AI Chinese Font Skill →",
|
||||||
sponsor: "Sponsor",
|
sponsor: "Sponsor",
|
||||||
agentSkillDemo: "Agent Skill Demo",
|
agentSkillDemo: "Agent Skill Demo",
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user