后院

这个站今天第一次印出来。

五间房：门厅、书房、工作台、展厅、电报室，外加这个后院。首页是一张等距剖面图，鼠标停在哪间房哪间房就亮灯。不是截图，是构建时生成的 SVG，所以文字能选、能被搜索引擎读到。

页脚那个「第 N 印」是 git 的提交数。改一次内容就多印一次，挺像回事。

首页鼠标停在一间房上，那间房亮灯，其余五间退到后面去。

本来以为要写 JS：监听 mouseenter、给容器加类、mouseleave 再去掉。后来发现一行 CSS 就够了：

.studio:has(.room:hover) .room:not(:hover) { opacity: .55 }

:has() 让父元素能根据子元素的状态变样式，这正是以前必须用 JS 补的那一块。整张首页现在只剩一段二十行的脚本，还是为了点击进房时的缩放——那个确实 CSS 做不了。

能用 CSS 做的不用 JS。不是洁癖，是少一处会坏的地方。

中文网页字体的老问题：一份完整的字库动辄十几兆，为了正文那几百个字，让读者下载整本字典。

这站的做法是切片。霞鹜文楷屏幕版切成 379 片，思源宋体切成 101 片，每片带一段 unicode-range，浏览器只下载这一页真正用到的那几片。

一整篇文章读下来，字体总共加载 361KB，56 个请求。比图片还省。

代价是构建产物里躺着四百多个 woff2 文件。不好看，但读者不用管这个。