浅谈Font Face(@font Face)

# 碎碎念

主题可以自定义字体所以就有了这个需求，对于极简主义而言字体无伤大雅。随便通过研究网络字体，水上一篇文章，如果错误还敬请指正。

首先文档给出的方法我不喜欢，主题默认也将base font family设置为Lato，虽然加载很快但会有轻微FOUT我不喜欢，可以通过以下方法取消，编辑 layouts/partials/head/custom.html：

1
2
3
:root{
	--base-font-family: var(--sys-font-family), var(--zh-font-family);
}

当然不是所有人都和我一样，字体还是蛮重要的。那下面将阐述最佳的使用方法（以思源宋体为例）,将其加入 head元素中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- [1] -->
<link rel="preconnect" 
      href="https://fonts.googleapis.com">
<link rel="preconnect" 
      href="https://fonts.gstatic.com" 
      crossorigin>

<!-- [2] -->
<link rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" />

<!-- [3] -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap"
      media="print" onload="this.media='all'" />

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" />
</noscript>

先写这么多咕~

# 引用

The Fastest Google Fonts - CSS Wizardry