字体样张制作
样张的目的不是欣赏,而是决策。要设计成让用户能够具体作答的形式。
文件约定
产出物:_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,字形自动适配
缺失字形用灰色虚线框 □ 表示
轮次间连续性
若存在上一轮样张,保持布局不变,仅更新字形 — 轮次间的可比较性决定反馈质量
增加“与上一轮相比的变化”区块,并引用已采纳的反馈项(用户可立即确认自己的反馈是否被反映)
适用场景:制作字体样张/样本、更新样张、需要反馈页面时使用。
限制:资料未说明收费、价格、平台等信息,暂未提供。