[CSS]在 Typecho 里自定义博客字体

好久不见，甚是想念！❤️
在这一次重新搭建的博客中，我使用了以轻量化著称的 Typecho，但在博客字体的自定义方面我遇到了困难（以前用 Wordpress 只需要自定义 css 就可以了）。于是，在解决这一问题后，我决定将我解决这一问题的方法分享出来。
在此特别感谢大佬 MoXiify 的帮助🙏

准备

首先，我们要选择字体文件，并且将其上传到服务器的博客所在目录上（我这边选择的是MiSans，并且我在博客所在目录新建了一个fonts文件夹，用来存放字体文件；格式最好选.woff2，这样可以最大限度减少网站流量使用）。

修改主题css

我这里以主题 PureSuck 为例（其它主题实现效果大致相同），进入以下目录

/usr/themes/PureSuck/css

并打开文件名为 PureSuck_Style.css 的css文件，在文件最末尾添加如下css代码：

@font-face {
  font-family: "MiSans（字体名称可任意修改）";
  src: url(/fonts/MiSans.woff2（字体路径，请一定要注意相对路径与绝对路径的区别！）) format("woff2"（字体格式）);
}

添加完毕后，再在此后添加以下代码：

body {    
    font-family: 'MiSans', -apple-system, BlinkMacSystemFont, "Open Sans", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif !important;    
}

打开网站，你会发现：嗯，我的字体好像已经生效了，但怎么有些地方没有发生变化呢？
这是因为有些主题设置了多种字体样式，此时只要将前面css代码中body字段替换为*即可全局显示字体。
代码演示：

* {    
    font-family: 'MiSans', -apple-system, BlinkMacSystemFont, "Open Sans", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif !important;    
}

整体代码演示：

@font-face {
  font-family: "MiSans";
  src: url(/fonts/MiSans.woff2) format("woff2");
}
* {    
    font-family: 'MiSans', -apple-system, BlinkMacSystemFont, "Open Sans", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif !important;    
}

修改后的PureSuck_Style.css文件：
跳转下载

---

参考资料：
[1]：Typecho 博客字体更换