单文件站

一个 HTML 装下全部：样式、脚本、字体、降级

这个页面就是它自己演示的东西：没有外部 CSS、没有外部 JS、没有外部字体。样式在 <style> 里，脚本在 <script> 里，断网也能完整显示。

1. 无 JS 也能读

这段文字需要 JS 才会被替换…

要点

HTML 本身承载全部信息，JS 只做增强。搜索框失效、图表不动，但文章照读不误。

2. 深浅色自动跟随

整站的配色来自 prefers-color-scheme，跟随系统设置，不写两套 CSS。改你的系统深色模式试试（这页已跟随，你的终端背景也会变）。

@media (prefers-color-scheme:dark){
  :root{--bg:#17161a;--text:#e6e3dc;...}
}

3. 交互增强

（还没点）

4. 字体系统栈

不下载字体文件，直接用系统字体：

font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",
  "Noto Sans CJK SC","Microsoft YaHei",sans-serif;

好处：0 字节字体文件、秒开、跟着用户系统语言走。代价：不同设备字形略有差异，不能做品牌化排版。

5. 自适应不用一个媒体查询

用 clamp() 让字号跟着视口平滑变化：

h1{font-size:clamp(24px,5vw,40px)}

比写一堆 @media 断点更省事，也不会在断点边界跳变。