1 Jul 2019 • 5 min read

Ghost博客更换字体

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

我的博客是由一个名为 Ghost 的博客引擎提供的支持, 默认的主题是官方的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

Ghost-Casper主题文字修改如下：

<!-- Google Fonts -->
<link href="//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="//fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900&display=swap&subset=chinese-simplified" rel="stylesheet" type='text/css'>

<!-- Family Fonts -->
<style>
body,     
h1, h2, h3, h4, h5, h6,
code, kbd, pre, samp, 
.site-nav,   
.nav a,    
.site-title,    
.site-description,      
.page-title,
.post-meta,   
.author-location,
.author-stats,    
.floating-header,
.reading-time,    
.read-next-story .post:before,
.pagination,
.site-footer,
 [class^="icon-"]:before, [class*=" icon-"]:before 
{ font-family:"Noto Sans SC", "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	}
</style>

<style>
strong,
.post-full-custom-excerpt,      
.post-content,
.post-full-content a, 
[class^="icon-"]:before, [class*=" icon-"]:before 
{ font-family:"Noto Sans SC","Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size:14pt;
  text-align:left;  
  font-weight:300;  
  letter-spacing:.011em;  
  color: #566573;  
	}
</style>

<style>
strong,
.post-card-excerpt,   
[class^="icon-"]:before, [class*=" icon-"]:before 
{ font-family:"Noto Sans SC","Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-align:left;  
  font-weight:300;  
  letter-spacing:.011em;  
  color: #566573;  
	}
</style>

思源字体

在Ghost博客中使用

Before

After

参考链接