浅记网站字体配置相关问题

首先祝大家 5.14 恋恋日快乐！

这应该是我过的第三个恋恋日了？

第一个恋恋日，2021 年，我初二，考完了直升考试的最后一门，心情舒坦的走出了考场，开怀大笑：“我辈岂是蓬蒿人！"，然后进行一个车万的颓。

第二个恋恋日，2022 年，我初三，在开心的学习高维前缀和 FWT 状物，并在家打旷野之息

第三个恋恋日，2023 年。我高一，正在不慌不忙的准备考试，写题，打 maimai，顺便等我的王国之泪卡带。

今天一时兴起，打算把网站字体的问题彻底解决。

我之前配置的时候就是，按照 mkdocs-material 官网的指示，配了 mkdocs.yml 里的这部分：

1
2
3
4
theme:
  font:
    text: Roboto Slab
    code: Consolas

然后发现这东西调用的是 Google fonts，国内会加载不出来，并且拖累网站启动速度。

所以我又用了这个：

1
2
extra_css:
    - stylesheets/extra.css

其中 stylesheets/ 在 docs 目录下。

然后写下了这样的内容：

1
2
3
4
5
6
7
8
@font-face {
    font-family: "Consolas", "Cambria", "Roboto Slab", "Lucida Console", "Times New Roman";
    src: "";
}
:root {
    --md-text-font: "Cambria";
    --md-code-font: "Consolas";
}

当时不太明白这个东西的运作原理，只是猜到这东西应该是引用的本地字体，所以我就检查了以下 windows 默认的字体里有么有合适的 Serif 字体，就找到了 Cambria。

然后将就着用了一段时间。

后面发现 Linux 上没有这个字体（作为默认），所以我就在想怎么搞。

想起了之前看到过有大佬搞过 fonts.google.com 的反代 fonts.loli.net，于是想到在 css 里引用这个反代服务。

查询了一番之后加入了这个部分：

1
2
3
<style>
  @import url('https://fonts.loli.net/css2?family=Fira+Code:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
</style>

然而在 .root 当中修改字体之后，字体仍然没有显示。

尝试了很久之后只能放弃，因为我开 F12 翻了以下生成的网页的源码，发现 fonts.loli.net 根本就没有被调用，留在那里的 fonts.googleapi.com 里的 css 文件是空的。

证明引用失败了。

后面翻 mkdocs-material 的 issue 的时候发现，好像别人的目录里，都直接把字体文件放进去了！

我是不是憨ber。

于是快马加鞭下载了需要的字体文件，放到 extra.css 的同目录下，然后引用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* author : black_trees */

@font-face {
    font-family: "Merriweather", serif;
    src: url('./fonts/Merriweather-Light.ttf') format('truetype');
         url('./fonts/Merriweather-LightItalic.ttf') format('truetype');
         url('./fonts/Merriweather-Black.ttf') format('truetype');
         url('./fonts/Merriweather-BlackItalic.ttf') format('truetype');
         url('./fonts/Merriweather-Bold.ttf') format('truetype');
         url('./fonts/Merriweather-BoldItalic.ttf') format('truetype');
         url('./fonts/Merriweather-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root {
    --md-text-font: "Merriweather";
}

这样尝试，然而还是没有显示，怎么回事呢。

观察了一会别人的配置文件之后，发现 src 后面应该是逗号，我测，我怎么这么傻。

加上之后，加载，眼前一亮，好了！！！！！

于是兴奋的把之前都没想过要加进去的 Hermit 也放进去了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* author : black_trees */

@font-face {
    font-family: "Merriweather", serif;
    src: url('./fonts/Merriweather-Light.ttf') format('truetype'),
         url('./fonts/Merriweather-LightItalic.ttf') format('truetype'),
         url('./fonts/Merriweather-Black.ttf') format('truetype'),
         url('./fonts/Merriweather-BlackItalic.ttf') format('truetype'),
         url('./fonts/Merriweather-Bold.ttf') format('truetype'),
         url('./fonts/Merriweather-BoldItalic.ttf') format('truetype'),
         url('./fonts/Merriweather-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

    font-family: "Hermit", monospace;
    src: url('./fonts/Hermit-Bold.otf') format('opentype'),
         url('./fonts/Hermit-BoldItalic.otf') format('opentype'),
         url('./fonts/Hermit-Light.otf') format('opentype'),
         url('./fonts/Hermit-LightItalic.otf') format('opentype'),
         url('./fonts/Hermit-Regular.otf') format('opentype'),
         url('./fonts/Hermit-RegularItalic.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
:root {
    --md-text-font: "Merriweather";
    --md-code-font: "Hermit";
}

网站就变成了现在的样子。

我猜，这个的原理是，html 里面引用 css 的文件，然后 css 的 @import 可以引用别的 css，src 就是直接引用对应位置的字体文件。

然后网页加载的时候，一层层调用，字体自然就显示成功了，逗号打成分号就让字体只有 Light 那部分加载了，没加载完，所以直接用字体全名是没法引用的！。

upd: 到学校之后发现又不行了，还是只有本地有这个字体才行。

于是我气急败坏，翻了下 OI-wiki 的 mkdocs.yml。

然后发现他们在 font 名字外面加了单引号。

我测，我试了一下好像就行了。

md.

最后更新: May 18, 2023