mirror of https://github.com/2234839/web-font.git synced 2026-06-04 00:08:11 +08:00

崮生（子虚） b4a7a820eb feat: AI Typography Skill 系统 + 中英双语 i18n + Before/After Demo

- 新增 skills/chinese-web-typography.md 作为提供给 AI agent 的排版智能文件
- 重写 README.md（中文默认），新增 README.en.md（英文版），互相引用
- 新增 TypographyDemo.vue 前后对比组件，展示中文字体效果差异
- 新增 src/i18n.ts 轻量国际化方案，所有组件文案支持中英切换
- 后端 /api/fonts 返回 temporary 字段标识临时字体
- 升级至 v1.8.0

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-28 22:41:47 +08:00

3.4 KiB

Raw Blame History

name	description
chinese-web-typography	设计精美网页时，可利用此技能引入中文字体、中文排版规范、字体裁剪 API 等元素，提升中文页面的排版品质。

Chinese Web Typography Skill

WebFont API

按需裁剪中文字体，只返回页面实际使用的字符。6 个字 ≈ 6KB。

CSS 直出

<style>
@font-face {
  font-family: "MyFont";
  src: url("https://webfont.shenzilong.cn/api?font=令东齐伋复刻体&text=静心茶舍&outType=woff2") format("woff2");
}
</style>

text 参数写什么字，就只返回那些字的子集。

查看可用字体

GET https://webfont.shenzilong.cn/api/fonts

返回当前服务器上所有可用字体列表。响应中 temporary: true 表示临时字体，随时可能被清理，不要使用。使用前先调用此接口确认字体是否存在。

其他接口

GET  https://webfont.shenzilong.cn/api?font={name}&text={chars}&outType=woff2  — 裁剪字体
GET  https://webfont.shenzilong.cn/api/fonts                                    — 列出可用字体
GET  https://webfont.shenzilong.cn/api/config                                   — 服务配置
POST https://webfont.shenzilong.cn/api/upload?mode=temp                         — 临时上传字体

字体名支持模糊匹配（精确 > 前缀 > 包含）。outType 支持 woff2 和 ttf。

SDK 增量加载

<script src="https://webfont.shenzilong.cn/webfont-sdk.js"></script>
<script>
  WebFont.observeFont({ fontName: "令东齐伋复刻体.ttf", selector: ".content", family: "MyFont" });
</script>

三种模式：observeFont（推荐，DOM 事件驱动）、loadFont（轮询）、loadText（手动文本）。

SDK 支持文字动态变化：当 DOM 内容改变时，observeFont 会自动检测新字符并增量加载，无需手动更新。适合 AI 生成内容、动态渲染等场景。

关键规则

行高：中文正文 1.8，标题 1.3。中文笔画密集，比英文需要更大行距
字重：中文 400/700 区分明显，中间字重（300/500）表现弱，不要依赖
中英混排：中文与英文/数字之间加空格
字号级差：标题间至少 4px 差距，否则层级模糊
首行缩进：text-indent: 2em 是中文正文排版的传统

可用字体

如果可以发请求，先调用 GET https://webfont.shenzilong.cn/api/fonts 查看最新可用字体列表。响应中 temporary: true 的字体随时可能被清理，可仅作演示，并提示用户。

如果不能发请求，公共服务永久字体有：

令东齐伋复刻体.ttf — 宋体风格，古典优雅，适合传统文化、禅意
问藏书房.ttf — 书法风格，适合文艺、文化场景

Fallback 链

/* 衬线 */ "CustomFont", "Noto Serif CJK SC", "STSong", "SimSun", serif;
/* 无衬线 */ "CustomFont", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
/* 楷体 */ "CustomFont", "LXGW WenKai", "STKaiti", "KaiTi", cursive;

风格速查

zen（禅意）：衬线标题 + 楷体正文，line-height 2.0，大量留白，暖色 #faf9f6 modern-tech（科技）：无衬线粗标题，letter-spacing -0.02em，强对比 luxury（奢侈）：衬线细字重(300)，超大 letter-spacing 0.15em，极简 editorial（编辑）：衬线标题 + 无衬线正文，首行缩进，行长 60~80 字符 warm（温暖）：楷体为主，line-height 2.0，暖色系

3.4 KiB Raw Blame History Unescape Escape