在 hexo-theme-fluid 上使用自定义字体
Last updated on 2022-05-14, Sat, 02:00 AM
动机
最近发现默认的样式很难看，就想着按照自己的偏好指定字体。
引入自定义 CSS
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 帮助阅读。
然后修改配置文件，添加自定义 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 视为根目录 / 即可。