网站字体间隔及文章段落
我有一个习惯，那就是浏览器常开看自己的博客网站。因为 macOS 系统有一个台前调度，窗口挂在后面也没事。我总会不自觉地检查自己的博客网站，看看有没有啥问题。因为网站才刚搞没两个月，怕遇到啥格式上的问题。
然而最近我敏锐地察觉到，博客网站的整体视觉呈现明显怪怪的，段落文字挤在一起，阅读起来总是需要眯着眼睛凑近屏幕。这种不适感并非最近才出现，仔细回想，好像是我之前亲手搭建这个博客站点的时候，就已经隐隐觉得哪里不对劲了。
那时我忙于功能实现，并没有深究排版问题，如今日积月累，这种别扭感终于达到了让我无法忽视的程度。网站用的是偏小的字体，原本网站没有调过任何字体和间距，导致默认状态下文字就像挤在狭窄车厢里的乘客，密密麻麻紧贴在一起。
不仅显得杂乱，更让长时间阅读变成一种折磨。不仅网站整体布局看起来很挤，文章的可读性也因此变得很差，段落之间缺乏呼吸感，每一行文字的首尾几乎要撞上边界。大段的技术讲解或随笔叙事挤成一团，读者很容易在中途走神或感到视觉疲劳。
其实这两点都可以得到很好的解决，因为我去请教了最近颇受欢迎的 DeepSeek。我把困扰我的字体拥挤和段落缩进问题一五一十地输入对话框，DeepSeek 迅速给出了清晰的回答。原来我一直觉得博客缺乏“书卷气”，缺少的正是这样细致入微的排版修饰。
它告诉我，CSS 的确存在专门设计字体间距的属性，不仅可以通过 letter-spacing 控制字符之间的疏密，还能用 text-indent 为每行开头设计出传统书籍般整齐的两格缩进。这个回答让我豁然开朗——我想起来课本上那些文章，字体有间隔，段落有缩进。
经过我的仔细检查，我发现文章内容和页面主体所在的容器分别是 article p 和 div#article-container p，所有需要调整的段落都位于这两个选择器之下，只需要针对这两个选择器进行修改就可以了。
比起简单粗暴地全站所有段落都应用缩进，我更倾向于在 CSS 里精准写好容器选择，这样既能确保只有文章正文的 <p> 标签获得缩进效果，又不会影响到侧边栏、页脚、评论区等其他地方的段落布局。这样做能保持全站样式的一致性，同时避免不必要的样式污染：
1 | article p |
处理完文章首行缩进的问题后，接下来我需要编写一段 CSS 代码来处理字体的间隔问题。字体间隔用到的是 letter-spacing 这个属性值，它可以控制每个字符之间的留白宽度。由于我希望字体间隔对全站所有文字生效，而不是仅限于文章正文。
所以我没有写具体的容器规则，而是直接框选了
标签里的所有文字容器。这样一来，无论是导航栏的菜单、侧边栏的简介，还是页脚的版权信息，都能享受到统一的舒适间距。我设定了letter-spacing: 0.1rem：
1 | body |
这个数值既不会让字距显得过于松散，也足够缓解原本字符紧贴的窒息感。实际测试时，我反复调整了好几个数值，最终确定 0.1rem 在大多数屏幕上都显得自然得体，文字之间像是被轻轻拉开了一个透气的缝隙。
接下来，我还需要在 _config.butterfly.yml 这个主题配置文件中正确引用我之前写好的这两个 CSS 文件，这样才能确保我的代码被网站正确加载和应用，而不是辛辛苦苦写完后发现毫无效果。
我打开配置文件，找到 inject 注入区域，在 head 列表里添加了一行新的 <link rel="stylesheet" href="/assets/css/paragraph.css">，同时确认其他的样式文件也都在正确的位置：
1 | inject: |
在这里我建议大家，写完后最好打开浏览器开发者工具检查一下自己有没有真正应用上去，看看 Elements 面板中的样式来源是否包含了你的自定义 CSS，而不是像我一样曾经写完就以为万事大吉，结果刷新页面发现毫无变化，第一反应竟然是去责怪 AI 给的代码有问题。
最后排查了半天才发现是自己忘记在配置里引用了。这种低级错误既浪费时间又显得很不专业，希望你们不要重蹈覆辙。完美，这样就大功告成了。最后我把所有修改过的文件——包括新增的 paragraph.css 和更新后的主题配置文件——全部推送到了我的网站仓库。
因为我事先写了一个 GitHub Actions 用于自动编译静态文件，所以只需要稍等一两分钟，Actions 工作流就会自动拉取最新代码、安装依赖、生成静态页面并部署到服务器上。等待的过程中我刷新了几次网站预览，确认效果已经顺利应用。
如果你也按照上述步骤操作后发现网站还是没有用上效果，那很可能是浏览器缓存的问题，浏览器为了加快加载速度，往往会缓存旧的 CSS 文件。建议你清空一下浏览器缓存，或者按 Ctrl + F5 强制刷新页面，通常就能看到焕然一新的排版效果了。
微信支付
支付宝
