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

本文最后更新于 2022-05-14, Sat, 02:00 AM

View English Version

动机

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

引入自定义 CSS

fluid 主题支持自定义 CSS , 还算省事。

在 source 下添加 CSS 文件即可。

(当然,外链也完全没问题。)

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

其中

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

uuu.css 定义 Ubuntufont-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 视为根目录 / 即可。


除特别声明外,本博客所有文章均采用 CC BY-SA 4.0 协议 ,转载请注明出处!