【笔记】NexT8.8修改自定义字体

发表于 更新于 阅读次数：

前言

NexT8.8修改自定义字体

存放字体

  • 将字体文件（eot、woff、woff2、ttf）放在hexo/source/fonts目录下（没有就创建一个fonts目录）

引入字体

修改主题配置文件

  • 打开注释
_config.next.yml
1
2
custom_file_path:
  style: source/_data/styles.styl

配置自定义样式

  • 创建（或修改）hexo/source/_data/styles.styl文件
  • 将所有想要使用的字体文件引入到CSS中
1
2
3
4
5
6
7
8
9
// 字体样式
@font-face {
  font-family: DroidSansChinese;
  src: url('/fonts/DroidSansChinese.woff2');
}
@font-face {
  font-family: Consolas;
  src: url('/fonts/Consolas.woff2');
}

指定字体

修改主题配置文件

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
29
30
31
32
33
34
35
36
37
font:
  # 启动字体配置
  enable: true

  # 在这里指定字体CDN（缺省值：https://fonts.googleapis.com）
  host: 

  # 指定 <body> 内使用的字体
  global:
    # 是否使用上面指定的字体CDN
    external: false
    # 如果使用CDN，就直接指定字体名；如果使用刚刚引入的字体，就指定font-family的值
    family: 
    # 字体大小（缺省值：1），单位：em（1em = 16px）
    size:

  # 指定站点标题使用的字体
  title:
    external: false
    family: DroidSansChinese
    size: 2

  # 指定文章内的1~6级标题使用的字体
  headings:
    external: false
    family: 
    size:

  # 指定文章正文使用的字体
  posts:
    external: false
    family: 

  # 指定代码块内使用的字体
  codes:
    external: false
    family: Consolas

完成

参考文献

LeFlacon的博客
菜鸟笔记——CSS3 @font-face 规则