在 hexo-theme-fluid 上使用自定义字体

动机

最近发现默认的样式很难看，就想着按照自己的偏好指定字体。

引入自定义 CSS

在 source 下添加 CSS 文件即可。

（当然，外链也完全没问题。）

source
├── asset
│   ├── css
│   │   ├── jbm.css
│   │   ├── markdown.css
│   │   └── uuu.css

其中

jbm.css 定义 JetBrains Mono 的 font-face. 我额外禁用了 ligature 连字特性。

uuu.css 定义 Ubuntu 的 font-face.

两者均由 Google Fonts 生成。我已修改 src url 为本地路径。

而 markdown.css 重新指定了文章标题 h2 和正文 markdown-body 各级标题的字体大小，以及 font-family .

您可以直接访问这三个文件。由于体积较大，此处节省篇幅，不再贴出。

本站的 CSS 文件都被 minify 过，您可以自行寻找 CSS formatter 帮助阅读。

jbm.css

uuu.css

markdown.css

然后修改配置文件，添加自定义 CSS 的路径。

此处需要把 source 视作 /.

# _config.fluid.yml

custom_css:
+  - /asset/css/uuu.css
+  - /asset/css/jbm.css
+  - /asset/css/markdown.css

如果是对着已经生成的 HTML 文件霍霍，可以直接在 <head> 的尾部添加自定的样式，例如

<link rel="stylesheet" href="/asset/css/uuu.css">
<link rel="stylesheet" href="/asset/css/jbm.css">
<link rel="stylesheet" href="/asset/css/markdown.css">

（我的 Profile 页面就是这样处理的。）

将自定义字体本地化

前面提到我打算本地化自定义的 font-face.

本来使用 Google Fonts 也足矣，但是我怕欧洲用户拿着 GDPR 找茬，只好认怂。

只要把所需的文件拖到本地，然后把 font-face 中的 src url 指向真实的资源文件即可。

比如这样：

source
├── ...
├── asset
│   ├── css
│   │   ├── jbm.css
│   │   ├── markdown.css
│   │   └── uuu.css
│   │   ...
│   └── fonts
│       ├── jetbrainsmono
│       │   └── v12
│       │       ├── tDbp2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO-LfjGbsVNLG7DGdF6OZ1PswAMg.woff2
│       │       ├── ...
│       │       ...
│       └── ubuntu
│           └── v19
│               ├── 4iCp6KVjbNBYlgoKejZPslyBN4Ffgg.woff2
│               ├── ...
│               ...

修改 src url 时，把 source 视为根目录 / 即可。