SuperAPI AI 工具集

font-specimen

设计与创作

查看项目

更新于 10-16 04:43

技能介绍

字体样张制作

样张的目的不是欣赏,而是决策。要设计成让用户能够具体作答的形式。

文件约定

产出物:_workspace/specimens/round-{NN}.html(round-01、round-02、……)

用 Artifact 工具部署(部署前加载 artifact-design 技能)。同一轮的修改更新同一文件,保持同一 URL

页面必须自包含:禁止外部资源,SVG 全部内联

打包组装器

复用第 1 轮验证过的组装器(布局连续性原则的实现体):

scripts/build_specimen.py — 读取概念文案 JSON + 模板 + _workspace/concepts/* 中的 SVG,生成样张 HTML。新一轮中修改文案 JSON(_workspace/specimens/round-{N}-copy.json)、输出路径和轮次文本后使用

assets/specimen_template.html — 第 1 轮基准布局(配色:韩纸/墨/靛蓝,基于 token 的深色/浅色)。要在轮次间保持布局,请从此模板出发

TTF 嵌入样张(已构建字体时 — 推荐)

若已有 TTF,不用 SVG 内联,而是把子集字体以 data URI 嵌入,用真实字体渲染。原因:能展示用户安装后得到的相同渲染效果(含字距、基线),且文本以纯文本书写,页面更轻、更易修改。

仅子集化样张中出现的字符(11,172 字 2.4MB → 百余字约 18KB)

python3 -m fontTools.subset {字体}.ttf --text-file=样张文字.txt --output-file=subset.ttf base64 -i subset.ttf # → @font-face src: url(data:font/ttf;base64,...) format('truetype')

第 4 轮实现示例:_workspace/specimens/round-04.html。SVG 内联方式(见下)用于字体构建前的初期轮次。

样张构成(按顺序)

页眉:项目名、轮次编号、日期、本轮要决定的一件事(一行)

概念区块(按概念重复):

概念名 + 形态哲学 1~2 句

代表字大型排版(例:把“한글”排得很大)

音节网格(样本集全部,标注块类型)

句子排版(较小字号 — 用于确认判读性)

设计语言核心规则 3 条以内摘要

对比表(概念 2 个以上时):同一字并排

缺失与未解决事项明示:本轮样张中没有的块类型、未解决的字母 — 不要悄悄省略

反馈问题区块:3~5 个

反馈问题设计原则

开放式问题(“怎么样?”)产生无法分析的答案。要提出答案能直接转化为下一步工作的问题:

选择型:“三个概念中要发展的方向是?(可多选,也欢迎混合提案)”

轴指定型:“粗细按现在的基准,更粗/保持/更细中哪个更符合概念?”

边界确认型:“为追求独创性,可牺牲可读性到何种程度 — 仅标题用就够,还是正文也需要?”

排版规则

概念比较轮中,所有概念应用相同文本、相同布局。原因:布局不同的话,用户反应的就不是字体而是布局。

字形 SVG 以 fill="currentColor" 状态内联插入,尺寸由 CSS 控制:

<span class="glyph" style="width:4rem"><svg viewBox="0 0 1000 1000">…</svg></span>

.glyph { display:inline-block; } .glyph svg { width:100%; height:auto; display:block; } .word { display:flex; gap:0; } /* 音节排列 = 单词。字距用 gap 实验 */

尺寸瀑布:同一单词按 96/48/24/16px 级别重复 — 确认可判读到哪个尺寸

同时支持深色/浅色:@media (prefers-color-scheme: dark) + :root[data-theme] 覆盖。得益于 currentColor,字形自动适配

缺失字形用灰色虚线框 □ 表示

轮次间连续性

若存在上一轮样张,保持布局不变,仅更新字形 — 轮次间的可比较性决定反馈质量

增加“与上一轮相比的变化”区块,并引用已采纳的反馈项(用户可立即确认自己的反馈是否被反映)

适用场景:制作字体样张/样本、更新样张、需要反馈页面时使用。

限制:资料未说明收费、价格、平台等信息,暂未提供。