无线电语录卡 / Radio Quote Card

赛车队无线电字幕那种格式的语录卡。单文件 HTML，截图即用。

输入 / Input

三样，缺一样就问，别自己定：

输入	说明	例
说话人名字	会被转成全大写，建议 ≤12 个字符；中文名不超过 5 个字，再长会折成两行，把语录挤出卡片	MORELLI
说话内容	一句话，见下面的长度档位	Why did I have to let him by?
主色	十六进制。名字、波形、语录、横线全用它	#e8112d

图标是可选的，默认没有。 使用者提供了图片路径才放，放在第二行 RADIO 的左边。 不要自己画一个，也不要从别处找一个填上去。

卡片构成 / Anatomy

┌────────────────────────────┐
│                      NAME  │  第一行：名字，主色，116px
│              [图标] RADIO  │  第二行：RADIO，白色，138px，比名字大一号
│                            │
│▏▎▍▌▋▊▉█▉▊▋▌▍▎▏▎▍▌▋▊▉█▉▊▋▌▍│  主色波形，真正通栏，左右不留边距
│════════════════════════════│  主色横线 5px，通栏
│                            │  ← 这里留一小条上半块底色
├────────────────────────────┤  ← 可见的分界，下半块底色更深
│      "QUOTE GOES HERE AND  │
│         WRAPS ACROSS A FEW │  主色，右对齐，max-width 86%
│                     LINES" │  左边留一条空，不顶到边
│                            │
│════════════════════════════│  主色横条 9px，压在最底边
└────────────────────────────┘

尺寸 800×1000。四件事最容易做错，都在这里写死：

1. 名字和 RADIO 是上下两行，不是并排一行
2. RADIO 比名字大一号（138px vs 116px），不是同一个字号
3. 标题整块右对齐，语录也右对齐，都不居中
4. 语录 max-width: 86% 且 margin-left: auto，右侧对齐、左边留一条空。 占满整宽会让文字顶到边，右对齐就看不出来了

底色是固定的近黑双层（上 #141417、下 #0b0b0d，中间一道可见分界）， 不跟着主色变。使用者说"做个蓝色的"，改的是 --accent，不是底色。

排版细节 / Type

这几条决定了像不像：

• 字体走 Arial Narrow 系的窄体，font-weight: 900、font-style: italic
• 光靠字体的斜度不够，再加 transform: skewX(-7deg)。这个倾角是这个格式的签名
• 全大写，text-transform: uppercase
• 语录用弯引号 “ ”，不要用直引号
• 语录右对齐。居中是错的，参考图里每一行的右端都对齐在同一条线上

语录字号档位

按字数选，不要让文字溢出卡片。语录里有汉字就看中文那一列：汉字和全角标点每个都占满一个字号宽， 同样的字数比拉丁字母宽将近一倍，照拉丁档排会溢出、被裁掉。中英混排也按中文列，字母只会更省地方。

数法：不算模板自带的首尾引号，标点、空格、字母、数字各算一个。能跑代码就用 len() 数，别目测， 中文档差一两个字就会多出一行。

拉丁字母（全英文）	含汉字	font-size
≤ 60	≤ 36	66px
61 – 100	37 – 45	56px
101 – 140	46 – 80	46px
> 140	> 80	先请使用者删到上限以内

中文列是在 Chrome 里按实渲染定的：到每档上限，66px 和 56px 不超过五行，46px 不超过七行，都不会被裁切。 标点多的句子会多占一行，上限已经为这个留了余量。

超过上限就不再缩字号。缩到那个程度已经不是这个格式了， 这种卡片的力量来自一句短话占满整块空间。

波形 / Waveform

波形是脚本按「语录 + 名字」做种子生成的，同样的输入每次渲染都是同一条。 不要改成 Math.random()，那样每刷新一次波形就变，同一张卡截两次不一样。

参数已经调过，贴近参考图：148 根、1px 间隔、中间高两头低的包络叠一层小幅噪声。 噪声压得住才像电平表，放大了就变成随机柱状图。

流程 / Process

1. 收齐三样输入，图标看使用者给没给
2. 复制 templates/radio-card.html，替换 {{NAME}} {{QUOTE}} 和 --accent
3. 按字数选语录字号，含汉字就看中文那一列
4. 有图标就把 .logo 那两处注释打开（它在第二行 RADIO 左边）；没有就保持注释状态
5. 渲染出来看一眼行数。三到四行最好看；超过五行就把字号降一档。 46px 是最小一档，到这一档只看有没有被裁切（最后一行和底边横条都完整），裁了就请使用者删
6. 存成文件，告诉使用者路径和截图区域

examples/example-card.html 是填好的成品，可以直接打开对照。

输出格式 / Output

卡片已生成：<文件路径>

- 主色：<色值>
- 语录字号：<档位>（<字符数> 字符）
- 图标：无 / 已放入 <路径>
- 截图：截 800×1000 那一块

边界 / Boundaries

• 不生成任何车队、厂商、赛事的徽标或商标。图标位只接受使用者自己提供的图片。 不要用 SVG 画一个近似的盾徽或标志糊上去。
• 不伪造真人说过的话。这个格式看上去很像官方转播字幕，很容易被当真。 内容是真实引语就要能说出出处；是玩梗或虚构，就要让使用者知道这一点， 且不得用于让别人误以为某个真实的人真的说过这句话。
• 不冒充官方物料。不加赛事台标、不加官方计时条、不做成看起来像转播截图的样子。
• 不拿它攻击真实个人。给某个真人配一句羞辱性的话再做成这种卡，等于伪造发言。
• 不引外部资源。字体走系统栈，不下载字体文件，离线打开必须一致。
• 底色不跟主色走。近黑底是这个格式的一部分，换成彩色底就不是它了。

变更记录 / Changelog

版本	日期	变更	类型
0.1.1	2026-09-26	语录字号按实渲染另立中文一列（≤36 / 37–45 / 46–80 字，超 80 请删），修中文语录溢出卡片被裁；中文名限 5 字；46px 档只查裁切；补中文用例	patch
0.1.0	2026-08-12	初始草稿，波形密度与倾角对照参考图调过	minor