全元素测试页

这是一篇故意「什么都有」的样本页，专门用来在官网端与公众号端做全元素对照。紧跟 H1 的这一段是导语：两端都会放大一号、灰一档——它是文章的入口，不是正文。

字体盘点：全站就这两族

回答「标题跟正文是不是一个字体」：是。v2.7 起全站统一黑体——标题与正文同栈（PingFang SC / 微软雅黑），层级完全交给记号系统：方块、虚线、朱赭、字重。字体不再是层级的承担者。

字体族	降级链（实际会生效的）	官网用在哪	公众号用在哪
黑体 sans	Noto Sans SC → PingFang SC → Microsoft YaHei	标题、正文、全部 UI	标题、正文
等宽 mono	Geist Mono → SFMono-Regular → Consolas → Menlo	行内代码、代码块	行内代码、代码块

（官网 UI 另有 latin 族 Geist / Inter，管首页数字与标签；serif 已退出文章排版，仅存首页字标。）

下面每个标题后缀的字体名，就是它此刻正在用的字体——标题和正文一样，都是黑体。

二级标题：虚线、方块与朱赭是它的档位 · 黑体

普通段落。这一行里埋了全部行内元素：加粗 = 朱批，朱赭 600，无记号、斜体也走朱批，不斜、行内代码是这个样子，还有 站内链接 与 外部链接——外链在公众号端会转成正文上标编号加文末脚注区。

三级标题：小方块 + 墨色加粗 · 黑体

H3 之后把三种容器一次摆开。容器只有两档：tip 纸色块、warning 同底色 + 朱赭 1px 边框，全无圆角——两档第一段的句尾都缀一枚朱赭小方块。

标题行是重点句：先说结论，再给解释

这是 tip 的叙述部分。标题行（上面那句）与叙述（本段）是 tip 的两个层级：标题行朱赭 600，叙述是次级灰——标题行必须压过叙述。

警示留给有真实代价的错误：泄密、丢数据、钱、不可逆

这是 warning 的叙述部分。它与 tip 底色相同，靠朱赭 1px 边框分档，标题行文字（注意 / 警告）承担第二重区分。

说明卡：微信端不做点击折叠，内容直接摊开

官网端是原生 <details>，summary 前的朱赭小方块在呼吸（opacity 脉冲），指引点开、展开后静止；公众号端不做点击折叠——微信会删掉全部 id 并把 SVG 属性名小写化，点击触发的动画必然失效，所以直接输出静态展开卡：标题、方块、正文全部可见，读者零操作。

折叠卡里可以放结构化内容：

• 折叠内列表条目一
• 折叠内列表条目二

结论也可以写在卡片外面：微信端卡片本来就全开，结论放哪儿读者都拿得到。

四级标题：无记号，墨色加粗 · 黑体

H4 没有方块：黑色加粗，与正文加粗（朱赭无记号）靠颜色区分。标题字只比正文大一点，层级靠记号与颜色，不靠字号猛跳。下面把结构性元素一次摆开。

无序列表（最多两层）：

• 一级条目：朱赭实心方块引导
  • 二级条目：次级灰空心方块引导

有序列表（原生紧凑列表，编号跟随客户端）：

1. 第一步，把任务说清楚
2. 第二步，把验收标准写下来
3. 第三步，让 AI 复述一遍再开工

表格只用横线，无竖线格子：

元素	官网端	公众号端
H2	虚线 + 方块 + 朱赭 700	虚线 + 方块 + 朱赭 700
H3	方块 + 墨色 600	方块 + 墨色 600
H4	墨色 600，无记号	墨色 600，无记号

引用是旁注：字号降一档、右侧缩进、不铺底、不满宽——它是「别人说的话」，不和正文抢地盘。

---

二级标题：代码、图与流程 · 黑体

text 代码块是中文散文（提示词、指令文本），必须能断句换行：

你是一位资深 B 端市场总监。请把我给出的产品描述改写成三条不超过 20 字的卖点，要求：每条只讲一个利益点，不用形容词堆砌，结尾不带标点。

带语言标注的代码块走等宽字体，公众号端强制折行、禁止横向滚动：

def apply(tokens):
    return {k: v for k, v in tokens.items() if v}  # 内联样式只留非空值

mermaid 流程图：官网端直接渲染成图，公众号端转「导出图片」提示卡：

图片与图注，图注是紧跟图片的斜体行：

头图样本：纸感几何风格，2.35:1 公众号头图比例

---

结尾一段：全文只允许朱赭一种彩色。页面上出现第二种颜色，就是样式出了问题。