0%

Hexo next 博客中文字体改为思源宋体

最近,自己看了看其他博主的文章,感觉在浏览文章过程中,字体对网页的浏览有一定的影响。本文采用的中文字体就是思源宋体。

思源宋体(英语:Source Han Serif,“思源”一词来源成语“饮水思源”)是AdobeGoogle所领导开发最新泛CJK开源字体。使用SIL开源字体授权,属于衬线宋体。并在2017年4月3日发布,支持简体中文、繁体中文、日文和韩文,并且各有7级字重,其中每一种都有65535个字形。
请看美图(思源宋体)。👇👇

Snipaste_2020-03-21_10-52-11.png

它的兄弟字体 思源黑体(英语:Source Han Sans)也是Adobe与Google所领导开发的CJK开源字体,经过SIL开源字体授权,属于无衬线黑体。并在2014年7月16日首次公布,支持简体中文、繁体中文、日文及韩文,并且各有7种字体粗细,其中每一种都有65535个字形。
这是一张多国语言的思源黑体图。👇👇

Snipaste_2020-03-21_12-17-33.png

通过比较,思源宋体在网页浏览文章中显得更舒服美观些。
那怎么在博客中使用这些字体呢?

有2种方式,第一种是从字体库下载到本地,然后博客网站通过本地加载字体。第二种是从字体库找一个镜像,通过CDN在博客中加载字体。看图就明白了。

Snipaste_2020-03-21_09-43-24.png

本文使用第二种方式实现。(本文是基于hexo next v7.7.2)
1.首先,在主题配置文件这样修改。

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
font:
enable: true
host: //fonts.loli.net

# Global font settings used for all elements inside <body>.
global:
external: true
family: EB Garamond
size:

# Font settings for site title (.site-title).
title:
external: true
family: Long Cang
size: 2

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: Noto Serif SC
size: 1.48

# Font settings for posts (.post-body).
posts:
external: true
family:

# Font settings for <code> and code blocks.
codes:
external: true
family: Source Code Pro

代码详细内容说明请参考官方文档

⚠ 需要将 host 镜像源改为://fonts.loli.net。请参考这篇文章前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

2.然后在站点source目录下的_data中新建variables.sty文件,在文件中添加如下代码。

1
2
3
4
$font-family-chinese          = "EB Garamond", STKaiti, KaiTi, SimKai, DFKai-SB, "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
$font-family-base = "EB Garamond", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
$font-family-posts = "EB Garamond", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
$font-family-headings = "EB Garamond", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;

3.最后上传到自己博客网站上,记得刷新一下缓存,即可看到自己博客字体已经为思源宋体啦。如图所示。

Snipaste_2020-03-21_12-55-20.png

参考文章
^_^