自约

目录

这里用于记录博客设计过程中的功能考量与实现细节。

单一低亮度暗色主题

本站只提供单一低亮度暗色主题,并且不随系统切换。这不是「还在路上」,而是为了把阅读体验收束在一个可验证的目标上。

我把零客户端JavaScript当作硬契约,因此不持久化主题偏好,也不在prefers-color-scheme上分叉。与其维护两套视觉系统,我更愿意把精力放在一套全天候阅读方案上:白天不压抑,夜里不刺眼。

新的基底不再模拟纸面,而是选择接近石墨的低亮度中性面。色相也被收束成三条主轴:265deg承担背景、分隔与暗部结构,92deg承担正文、标题与辅助文本,188deg承担链接、焦点和提示交互。正文使用略带暖度的浅色,避免纯白在无光环境里形成强烈眩光;188deg则继续延续本站原有的清亮识别。

这个取舍也被硬性数值约束。WCAG 2.2 contrast作为合规底线,APCA作为阅读质量指标:正文在背景上不低于WCAG 12:1与APCA |Lc| 85,正文链接保留188deg并不低于WCAG 10:1与APCA |Lc| 75,辅助文本不低于WCAG 7:1与APCA |Lc| 55。主题不追求纯黑纯白的最大数值,因为极端对比会削弱弱光环境下的舒适度,也会让整体审美变得生硬。

字体取舍

阅读界面的字体都来自系统自带,不引入任何远程字体——哪怕是子集化后只有几百KB的Noto Serif,也违背了我对加载体积与离线友好度的取舍。这意味着字体的最终观感必然依赖你的操作系统,但我接受这一份「不齐整」。

正文使用无衬线字体。Windows系统的中文衬线默认仍是宋体、新宋体,在小字号下笔画发糊、衬线锯齿明显,跨平台观感差距远大于无衬线。让承载绝大部分阅读时长的正文落在更现代、更一致的无衬线上,是最稳妥的取舍。

标题(h1–h6)使用衬线字体。大字号下,宋体与Songti SC的「印刷感」反而成为优点,也能在低亮度背景上和无衬线正文形成清晰层级;衬线字体在normal字重已经因为笔画自带视觉锚点而显得”墨重”,因此标题统一使用medium (500)字重,避免合成粗体在CJK字形上发糊;段内强调(<strong>/<b>)使用semibold (600),明确低于标题的视觉层级。阅读正文的字重梯度是400、500、600,不在主题或prose中文文本中直接使用700。

边界也保留给真正需要它的地方:代码高亮中的Prism语义token可以使用700来表达bold/important;OpenGraph图片不是阅读界面,而是独立的生成管线,使用Astro Fonts与@fontsource/noto-sans-sc的400、600字重来保证社交卡片可控。

跨系统观感的诚实预期:macOS、iOS落到Songti SC,Windows落到SimSun,Linux、Android通常落到Noto Serif CJK SC。极少数没有任何中文衬线字体的系统会优雅回退到无衬线——不影响阅读,只是失去标题与正文的字形对比。

页首