woshale.com
← 返回博客

给首页做一次视觉升级的完整记录

编者按字体加载的最新实践已整理成独立文章:《网页字体加载的三个阶段》,本文的观点以那篇为准。

这个站两天里换了三副面孔:第一版是暖纸白配系统字体,第二版上了自托管字体和噪点纹理,第三版干脆推翻重做,变成纯黑双光束的控制台。每次都以为"这次到位了",每次睡一觉又发现不对劲。把过程记下来,供下一次迭代对照。

第一轮:字体决定气质

中文网页字体是个坑——全套思源宋体 55MB,谁也别想加载完。最后的组合拳是:西文自托管、中文走系统。Fraunces 管标题的优雅,Inter 管正文的清楚,宋体黑体交给 PingFang 和雅黑兜底。全部字体加起来 156KB,从国内镜像拉,速度无感。

第二轮:深浅主题与纸感

暖纸白版本加了深浅色切换,技术上有个小细节值得记:主题应用脚本必须内联在 <head> 里同步执行,等 CSS 加载完再切就会白屏闪烁。另外叠了一层 5% 透明度的 SVG 噪点,"纸感"这东西玄学,但去掉之后确实显得廉价。

第三轮:诚实的黑色

最终版选择了纯黑。原因很直接:这个站的核心叙事是"一台正在运行的服务器",而服务器机房的灯是关着的。两道径向渐变的光束以 20 度角从视口顶部斜切下来,72px 的高斯模糊让它们像机柜指示灯的余晖——氛围对了,所有组件都活了。

风格迭代最贵的不是写 CSS 的时间,是承认"上一版不对"的勇气成本。

留下来的三条原则

第三条是这次最大的收获:纯黑控制台之所以一步到位,是因为它回答的不再是"什么好看",而是"我在运行"。

系列 · 据点建站史
← 更多文章 聊聊这篇 →