在更换博客字体时，我意外发现了一个之前被忽略的排版常识。在这里记录一下关于网页字体加粗的“底层逻辑”以及我的最终解决方案。
最近在对自己的 Halo 博客进行细节打磨时，决定换掉千篇一律的系统字体，改用口碑极佳的开源中文字体——霞鹜文楷 GB。换上之后，博客的排版确实瞬间有了书卷气
🖋️认知误区：加粗只是 CSS 的一条指令吗？
在很长一段时间里，我一直有个先入为主的错觉：实现网页字体的更换，只需要准备一个 .ttf 或 .woff2 文件就足够了。
我理所当然地认为，只要在 CSS 中写上 font-weight: bold;，浏览器就会像魔法一样，自动把文字的线条“涂粗”；反之，给个较小的分数值，它就能变细。
然而，在更换了新字体后，这种“理所当然”翻车了。我发现博客文章即便选中文本按下加粗，视觉上也毫无变化，甚至显得有些模糊。
💡真相：真正的粗体是有“独立灵魂”的
通过查阅资料才意识到，在专业且规范的字体排版领域，加粗从来不是靠算法强行扭曲出来的。
中文字体结构极其复杂，如果单纯依靠浏览器强制加宽笔画线条（即所谓的“伪加粗”，Fake Bold），会导致字体内部的间隙被填死，笔画转折处糊成一片，严重影响阅读体验。为了保证排版的美感，许多现代化的博客主题和浏览器底层会直接限制这种生硬的“伪加粗”效果。
本质上，常规体（Regular）和粗体（Bold）往往是两个完全独立的字体文件。 优秀的字型设计师在处理不同字重时，会针对每一笔画的比例进行重新设计。
为了达到最理想的视觉层次感，我决定采用组合方案：用 霞鹜文楷 作为常规正文，而对应的加粗效果，则借用风格相近但笔画更浑厚的 霞鹜臻楷 来充当。
🛠️优化方案：如何优雅地实现字体加粗
为了不让庞大的中文字体包拖慢加载速度，我采用了字体分包工具 cn-font-split 1进行按需加载。针对“加粗失效”的问题，我的解决思路如下：
1. 准备多套文件：准备好 霞鹜文楷 (Regular) 和 霞鹜臻楷 (Regular) 的原始字体包。
2. 独立进行分包：利用 cn-font-split 分别对这两个字体进行处理，生成两套对应的 CSS 引入文件。
3. 统一 CSS 定义（核心步骤）：
打开分包生成的
result.css。
将两个包中的 font-family（字体族名称）统一修改为一个完全相同的名字，例如 LXGW-Mixed。
精准分配权重：
在霞鹜文楷的 CSS 中，设置 font-weight: 400;。
在霞鹜臻楷的 CSS 中，将所有权重声明批量修改为 font-weight: 700;。
4. 后台引入并生效：在 Halo 后台引入这两份 CSS，并在自定义 CSS 中将全局字体设置为 LXGW-Mixed。
✅最终效果
经过这样设置后，浏览器就变得非常“聪明”：当它解析普通段落时，会自动调用 400 权重对应的“文楷”包；一旦遇到标题或加粗标签（如 <strong>），就会去请求并渲染 700 权重对应的“臻楷”包。
虽然这只是一个微小的技术细节，但当看到博客页面呈现出清晰锐利、粗细有致的视觉层次感时，这种“强迫症”被治愈的成就感确实让人愉悦。对于追求极致排版的博主来说，这一点折腾是非常值得的。💻