跳到正文
MAKI分享
返回

把博客换成像素风之后

makifx

原先这个站跑在 WordPress 上。它没什么毛病——直到你意识到,一个只写文章的个人博客,需要 PHP、MySQL、一整套插件生态,以及每周一次的漏洞通告。于是就有了这次迁移。

为什么是静态

静态站点生成器把「服务器」这一层整个拿掉了。构建产物是一堆 HTML,丢到 CDN 上就完事:

  • 没有 PHP,没有数据库,没有后台登录入口
  • 运行时内存占用为零,因为根本没有常驻进程
  • 攻击面只剩 CDN 本身

代价是动态能力要外挂:评论用 Giscus 接 GitHub Discussions,搜索用 Pagefind 在构建期生成索引。

换句话说,我用「构建时的一次性计算」换掉了「运行时的永久负担」。 对个人博客这种更新频率,这笔买卖划算得离谱。

像素风不是加个字体就完事

第一版我天真地只换了字体,结果整站糊成一片。像素字体有一条硬性约束:字号必须落在设计尺寸的整数倍上。

缝合像素字体 12px 的设计尺寸就是 12px,那么可用字号只有 12、24、36、48。你写个 13px 或者 18px,浏览器会重采样,字形边缘立刻变成灰色毛边。

/* 这一条不做,前面所有努力都白费 */
body {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  font-variant-ligatures: none;
}

还有三条铁律,破一条就出戏:

  1. 零圆角 —— border-radius 永远是 0
  2. 零模糊 —— 阴影只能硬偏移,blur 必须是 0
  3. 零渐变 —— 颜色一律纯色
像素红心

中文像素字体怎么选

这是最麻烦的一环。英文像素字体满地都是,中文的却不多,因为汉字字库太大——完整的 CJK 像素字体动辄几 MB,直接自托管会让首屏爆炸。

方案字符覆盖体积许可
缝合像素字体 Fusion Pixel泛拉丁 + 泛中日韩12px 等宽切片共 1.2MBMIT AND OFL-1.1
Zpix 最像素英文 + 简繁中 + 日文完整字体约 2MB+未标注
ZLabs-Pixel-12px简体中文较小MIT

答案是按 unicode-range 切片。缝合像素字体的 12px 等宽版被切成 79 个 woff2,浏览器只会下载当前页面实际用到的那几片——通常 3 到 6 片,加起来 100KB 出头。

值得吗

如果你的博客只是写文章,静态方案在安全性和成本上是降维打击。像素风则是纯粹的审美选择——它不适合所有人,但如果你喜欢,就没有替代品。

下一步打算把评论接上,再把 RSS 的输出格式调一调。


分享这篇文章:

上一篇
用 CSS 画一个日式 RPG 对话框