Change Icarus Theme Font

Install font

选择心仪的字体，下载到本地。建议使用 woff2( Web Open Font Format 2.0) 格式

ttf-to-woff2

WOFF2

Web Open Font Format 2
定义：WOFF2 是 WOFF 的升级版，由 Mozilla、Microsoft、Google 和其他组织共同开发。它是一种专为网络传输设计的字体格式，旨在优化网络性能。
特点：
基于 TTF 或 OTF（OpenType Font）格式，但添加了额外的压缩。
使用更高效的压缩算法，比 WOFF 和原始 TTF/OTF 文件更小，从而加快了下载速度。
包含了元数据和版权信息。
广泛支持现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。

Modify theme files

Add font files

在<blog_root_folder>\themes\icarus\source\css\font中创建文件夹，例如这里添加了MapleFont文件夹，并将下载好的字体文件(ttf,woff2,.etc)放入MapleFont文件夹中

1
2
3
4
5
6
7
8
9
10
11
12
13
14

╭───┬────────────────────────┬──────┬─────────┬────────────────╮
│ # │          name          │ type │  size   │    modified    │
├───┼────────────────────────┼──────┼─────────┼────────────────┤
│ 0 │ css\font\font.css      │ file │ 4.9 KiB │ 6 minutes ago  │
│ 1 │ css\font\fontawesome   │ dir  │     0 B │ 3 weeks ago    │
│ 2 │ css\font\MapleFont     │ dir  │ 4.0 KiB │ 19 minutes ago │
│ 3 │ css\font\sourcecodepro │ dir  │     0 B │ 3 weeks ago    │
│ 4 │ css\font\ubuntu        │ dir  │     0 B │ 3 weeks ago    │
╰───┴────────────────────────┴──────┴─────────┴────────────────╯

<blog_root_folder>/themes/icarus/source/css/font/MapleFont
-a--- 8.1M 24 Jul 17:22  MapleHand-Bold.woff2
-a--- 8.8M 24 Jul 17:22  MapleHand-Regular.woff2
-a---  58k  9 Jun 20:02  MapleMono-NF-CN-Regular.woff2

Modify font.css

修改font.css，加入新字体的引用

font-face syntax

• woff: format(“woff”)
• woff2: format(“woff2”)
• ttf: format(“truetype)
• otf: format(“opentype”)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@font-face {
  font-family: "Maple Hand";
  font-style: normal;
  font-weight: 400;
  src: local("Maple Hand"),
    url(/css/font/MapleFont/MapleHand-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "Maple Hand";
  font-style: normal;
  font-weight: 400;
  src: local("Maple Hand"),
    url(/css/font/MapleFont/MapleHand-Bold.woff2) format("woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-style: normal;
  font-weight: 400;
  src: local("MapleMono"),
    url(/css/font/MapleFont/MapleMono-NF-CN-Regular.woff2) format("woff2");
}

Modify base.styl

修改theme\icarus\include\style\base.styl,在$family-sans-serif和$family-code前面引用 font.css；

• $family-sans-serif 正文字体，在字体列表前面加入 Maple Hand
• $family-code 代码字体，在字体列表前面加入 Maple Mono

1
2
3
4

@import '../../source/css/font/font.css'

$family-sans-serif ?= Maple Hand,-apple-system,BlinkMacSystemFont,"Segoe UI Emoji","Segoe UI",Ubuntu,Roboto,'Open Sans',Oxygen-Sans,Cantarell,'Microsoft YaHei',sans-serif
$family-code ?= Maple Mono,Maple Hand,'Source Code Pro',Menlo,SFMono-Regular,Consolas,Roboto Mono,'Courier New',monospace,'Microsoft YaHei'