前言

在美化博客的道路上，字体定制是一个绕不开的话题。一个合适的字体能显著提升阅读体验。然而，不恰当的配置不仅会拖慢网站速度，还可能导致维护困难。最近，我对博客的字体进行了一次彻底的改造，整个过程可以分为两个阶段：

  1. 清理与还原：移除所有过去实验性的、混乱的自定义字体配置，让网站回归到主题的默认状态。
  2. 应用新字体：在干净的基础上，引入一款心仪的全局字体（霞鹜文楷），并解决定制过程中遇到的样式覆盖问题。

本文将完整记录这两个阶段的操作，希望能为同样使用 Hugo PaperMod 主题的朋友提供一份实践参考。

第一阶段：清理旧配置，回归默认

在进行新的定制之前，最好的做法是先“清场”，确保没有旧的样式干扰。我之前的配置比较混乱，字体定义散落在多个文件中。

1. 定位相关配置文件

我首先需要找出所有定义或使用了自定义字体的文件。通过搜索项目中的 @font-face 和 font-family 关键字，我定位到了以下几个文件：

  • assets/css/extended/fonts.css: 定义了 @font-face 规则。
  • assets/css/extended/custom.css: 全局覆盖了 body 的字体。
  • assets/css/extended/code.css: 为代码块设置了自定义字体。
  • assets/css/extended/blank.css: 也存在 font-family 的设置。

2. 执行清理操作

清理过程非常直接：

  1. 清空 @font-face 定义：将 assets/css/extended/fonts.css 文件内容完全清空，移除所有自定义字体的声明。
  2. 移除 font-family 覆盖：依次编辑 custom.css 、code.css 和 blank.css ，删除其中所有设置 font-family 的规则。

完成这一步后，我的博客完全回退到了 PaperMod 主题的默认字体栈，这是一个干净的起点。

第二阶段：引入新字体并解决问题

在干净的环境下，我开始引入新的全局字体 LXGWBright。

1. 引入新字体（初次尝试）

我的目标是将正文、标题、链接、代码块等所有可见文字都统一为新字体。

操作步骤：

  1. 放置字体文件：将字体文件 LXGWBright-Regular.woff2 放入 static/fonts/ 目录下。

  2. 添加 CSS 规则：在 assets/css/extended/custom.css 文件中，添加以下内容：

    /* 声明自定义字体 */
@font-face {
  font-family: 'LXGWBright';
  src: url('/fonts/LXGWBright-Regular.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* 全局应用字体 */
body {
    font-family: 'LXGWBright', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
    • @font-face 用于声明我们自己的字体，并命名为 LXGWBright。
    • body 的 font-family 规则尝试将这个新字体应用到整个页面。

结果： 大部分文字，如段落、标题、列表等都成功应用了新字体。但一个显眼的问题出现了：文章中的代码块（<code> 和 <pre> 元素）仍然是浏览器默认的等宽字体。

2. 排查与定位问题

这个问题是典型的 CSS 优先级（Specificity） 问题。

简单来说，虽然我在 body 上设置了全局字体，但 PaperMod 主题内部为代码块定义了更具体的样式规则。浏览器的渲染引擎认为主题的规则更“重要”，因此覆盖了我的全局设置。

3. 最终解决方案：提升样式优先级

要解决这个问题，我需要编写一个比主题默认规则更优先的样式来“反覆盖”它。

操作步骤：

在 assets/css/extended/custom.css 文件中，追加以下规则：

/* 强制为代码块应用自定义字体 */
.post-content pre,
.post-content code {
    font-family: 'LXGWBright', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}

这段代码的关键点：

  • 更具体的选择器：使用 .post-content pre, .post-content code，它的指向性比单纯的 body 更明确，因此优先级更高。
  • !important 声明：这是一个“王牌”。它会强制浏览器应用这条规则，忽略其他任何冲突的、没有 !important 的规则。

在追加这段代码后，代码块的字体也成功变成了 LXGWBright，整个网站的字体视觉上达到了统一。

总结

通过这次完整的字体定制流程，我总结出几个关键经验：

  1. 先清理，再定制：在修改主题样式时，如果已有混乱的旧配置，先花时间将其清理干净，可以避免很多意想不到的冲突。
  2. 理解 CSS 优先级：全局规则（如 body）很容易被主题中更具体的元素规则覆盖。当你发现样式不生效时，首先应该考虑是不是优先级的问题。
  3. 善用开发者工具：使用浏览器的开发者工具（按 F12），可以方便地检查元素的 CSS 规则，快速定位是哪条样式在起作用，从而找到冲突的根源。
  4. 谨慎使用 !important：虽然 !important 是解决优先级问题的利器，但过度使用会导致 CSS 难以维护。它应该作为“最后手段”，用在确实需要强制覆盖主题默认样式的地方。

现在，我的博客不仅拥有了心仪的字体，CSS 配置也变得更加清晰和可控。