老式终端美学：CRT 扫描线、像素风与 read-only 精神

我个人网站走的是"像素复古终端"美学。很多人觉得这纯粹是情怀，其实它背后有一套扎实的视觉工程逻辑，做完能学到不少 CSS 和设计的东西。

一、为什么"像素"看起来高级

像素风的本质是刻意降低信息密度——把画面拆成一格一格的"块"，眼睛看到的不是连续渐变，而是有节奏的色块。

对比一下：

风格	圆角/阴影	给人感觉
现代极简	大圆角、柔阴影、毛玻璃	精致、丝滑、工具感
像素复古	直角、硬偏移阴影	坚定、克制、有性格

关键是一致性——一旦决定像素风，从 border-radius: 0 到阴影全部要直角硬阴影，不能混圆角。

二、CRT 扫描线不是画着玩的

CRT 显像管是电子束一行行扫出来的。所谓"扫描线"，就是每两行之间那道天然的暗缝：

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.03) 0 1px,  /* 一道暗线 */
    transparent 1px 3px          /* 两行间隙 */
  );
}

加这么一层几乎不可见的横向暗纹，眼睛会自动把整个页面"收进"一台旧显示器里。妙就妙在它够淡——淡到不影响对比度，但足以统一所有元素的"画质"。

关键：扫描线是 pointer-events: none 的装饰层，绝不能挡住点击，也不能浓到伤眼。

三、硬偏移阴影：像素风的"立体"

现代阴影是box-shadow: 0 20px 40px rgba(...)带模糊。像素风恰恰相反——模糊是敌人：

.window {
  box-shadow: 4px 4px 0 #1a1726; /* 无模糊，纯平移的实心块 */
}

一个纯色块整体平移 4px 就叫"硬阴影"。它模拟了"低分辨率下阴影只能是一个方块"。搭配 hover 时阴影从 4px 变 6px、元素 translate(-2px,-2px)，就是"窗口被提起来"的感觉。

.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1a1726;
}

四、像素字体：自托管的坑

像素风的灵魂是字体。但有个大坑：中文字体加粗会被浏览器做"伪粗体"变糊。

• 像素字体坚持用单一字重（通常 400），不要用 bold，不然系统会插值渲染，像素就碎了
• 自托管 woff2，别走 CDN——国内网络不稳，字体闪回系统字体，像素感"时有时无"最掉价
• 给主字体加 <link rel="preload">，避免布局抖动（CLS）

五、read-only 的浪漫

终端最打动人的是它的 read-only 气质——它不讨好你，只如实反馈。做到网站上是：

• 信息用等宽字体（VT323 这类），数字对不齐会很难受
• 边框用两像素直角，明确"这里是边界"
• 交互尽量"按键感"：按下就是 translate(3px,3px) + 阴影归零，像真的按了个键

小结

复古终端的视觉工程，其实就四件事：

1. 一致性：全程直角 + 硬阴影，不混现代圆角
2. 装饰克制：扫描线淡淡一层，不伤对比度
3. 字体自托管：单字重、本地文件、preload
4. 交互按键化：state 明确，反馈干脆

它不高级在"旧"，而高级在规则清晰、执行彻底。就像一台好终端——该显示的显示，不该有的绝不出现。