我的博客是由一个名为 Ghost 的博客引擎提供的支持, 默认的主题是官方的Casper。

Casper主题默认的字体中文字符在一些环境中看上去有些单薄不和谐,甚至中英文部分极不协调不好看,对于我这个强迫症患者来说是一件非常不舒服事,所以我决定尝试着使用另外一些字体来替代默认字体。

Ghost博客后台管理界面中提供了Code injection这个功能,可以插入一些代码到 Site Header 和 Site Footer 中去,所以我尝试着使用这个功能更改字体。

思源字体

思源宋体

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

思源宋体对于汉文字体届的贡献完全不亚于思源黑体。

在Ghost博客中使用

Noto Sans TC

Google Noto Sans 思源黑体

Noto Serif TC

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

Before

After

After

参考链接