我的博客是由一个名为 Ghost 的博客引擎提供的支持, 默认的主题是官方的Casper。
Casper主题默认的字体中文字符在一些环境中看上去有些单薄不和谐,甚至中英文部分极不协调不好看,对于我这个强迫症患者来说是一件非常不舒服事,所以我决定尝试着使用另外一些字体来替代默认字体。
Ghost博客后台管理界面中提供了Code injection这个功能,可以插入一些代码到 Site Header 和 Site Footer 中去,所以我尝试着使用这个功能更改字体。
思源字体

2017 年 4 月 3 日,Adobe 联合 Google 发布了思源宋体。思源宋体是 思源黑体 的兄弟字体,同样支持繁简中文、日文、韩文四种语言,同样包含七种字重,同样使用 OFL 自由授权,并在 GitHub 上开源。我国的常州华文字厂也参与了字体设计。思源宋体遵循 GB 18030 和通用规范汉字表,包含 8105 个规范字。
思源宋体对于汉文字体届的贡献完全不亚于思源黑体。

在Ghost博客中使用

Google Noto Sans 思源黑体

Google Noto Serif 思源宋体
自定义字体例子:
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer {
font-family: "Ubuntu", sans-serif;
}
/* This is necessary to not mess up share icons at bottom of posts */
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "casper-icons", "Open Sans", sans-serif;
}
已插入以下代码。我尝试使用谷歌字体库。
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900&display=swap&subset=chinese-simplified" rel="stylesheet" type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900&display=swap&subset=chinese-simplified" rel="stylesheet" type='text/css'>
<style>
body,
.post-content,
.post-full-content a,
[class^="icon-"]:before, [class*=" icon-"]:before
{ font-family:"Noto Sans SC", sans-serif;
font-size: 14pt;
font-weight: 300;
color: #566573;
}
</style>
把这段代码粘贴到博客后台 Code injection 功能的 Site Header部分即可,保存之后无需重启 Ghost ,只需要刷新下网页就可以看出字体的变化。

Before

After
