基础
字体排印
三种字体，一条标题阶梯，页面标题之上什么都没有。
Hanken Grotesk 用于界面，Newsreader 用于标题与编辑性声音，IBM Plex Mono 用于标签与数据。每条字体栈都指名了 CJK 回退，所以中文页面用的是配好的字，而不是平台随手替换的那个。
标题是一条所有界面共用的阶梯，在手机与 1288px 页面之间流体变化。--fs-title 之上什么都没有：一个页面只有一样东西比它自己的记录更大。各级之间刻意靠得很近——这条阶梯分的是同类记录，不是标题和它自己的子标题，所以嵌套的两个标题必须跳一级。
The White Reset
A row of counted facts
Depth is a hairline
Bound to state, never to brand
One pointer, and it is ink
排印 token
| Token | 值 | 备注 | |
|---|---|---|---|
--sans | var(--font-hanken, 'Hanken Grotesk'), var(--cjk-sans), 'Helvetica Neue', Arial, sans-serif | ─── Type ─────────────────────────────────────────────────────────────── Three faces and their CJK companions. EVERY `var()` here carries a fallback, and that is load-bearing rather than tidy. A `var(--font-hanken)` with no fallback, in a host that does not define `--font-hanken`, is invalid at computed-value time — and IACVT does not skip the one term, it discards the WHOLE declaration. So the entire stack collapsed to nothing and every surface rendered in the platform's system font. It worked inside the site, where next/font defines those names, and failed everywhere else: for a package whose whole purpose is to render the same on both sides, that is the worst possible bug. With the fallback, a host that loads the faces itself (next/font, a CDN) sets `--font-*` and wins; a host that does not falls through to the literal family name, which is exactly the name `fonts.css` declares its vendored @font-face rules under. The CJK stacks deliberately end WITHOUT a generic family. They are spliced into the middle of the three stacks above, and a generic in the middle terminates a font stack — everything listed after it is unreachable. | |
--serif | var(--font-newsreader, 'Newsreader'), var(--cjk-serif), Georgia, serif | — | |
--mono | var(--font-plex-mono, 'IBM Plex Mono'), var(--cjk-sans), ui-monospace, SFMono-Regular, Menlo,
monospace | — | |
--cjk-serif | var(--font-noto-serif-sc, 'Noto Serif SC'), 'Source Han Serif SC', 'Songti SC', STSong,
SimSun | — | |
--cjk-sans | var(--font-noto-sans-sc, 'Noto Sans SC'), 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei' | — | |
--lh-cjk | 1.8 | — | |
--ls-cjk | 0 | — | |
--fs-title | clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem) | — | |
--fs-lead | clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem) | page h1 40 → 54px | |
--fs-heading | clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem) | band heading 30 → 42px | |
--fs-sub | clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem) | record title 24 → 29px | |
--fs-item | clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem) | card sub-head 21 → 25px |