定制Jekyll-GitHub-Pages的字体显示

---

tags: Frontend CSS

写在前面

改一下博客的字体显示, 默认的不好看, 这里改成JetBrainsMono Nerd Font Mono, 连字字体.

官方GitHub:

JetBrainsMono Nerd Font Mono;

这里我的主题的TeXt, 官方主页:kitian616/jekyll-TeXt-theme: 💎 🐳 A super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc. (github.com);

更改方法

参考了:

动态加载字体 - Tate & Snow (tate-young.github.io);

在本地项目的目录下, 也就是你的xxx.github.io这个仓库下, 新建目录:

cd ~/code/xxx.github.io
mkdir _sass/

然后新建文件:

vi custom.scss

写入如下内容:(内容是从google webfonts helper (mranftl.com)来的)

/* start custom scss snippet */

/* jetbrains-mono-regular - latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/jetbrains-mono-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('/assets/fonts/jetbrains-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/assets/fonts/jetbrains-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('/assets/fonts/jetbrains-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('/assets/fonts/jetbrains-mono-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('/assets/fonts/jetbrains-mono-v13-latin-regular.svg#JetBrainsMono') format('svg'); /* Legacy iOS */
}

body {
  /* 更改正文字体 */
  font-family: 'JetBrains Mono', Times, Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace;
  font-size: 1.2rem;
}

code {
  /* 更改code字体 */
  font-family: 'JetBrains Mono', Times, Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace;
  font-size: 1.05rem;
}

/* end custom scss snippet */

然后从上面提到的网站google webfonts helper (mranftl.com)下载字体, 解压到指定目录, 这里就是/assets/fonts目录了, 注意不是系统根目录, 而是项目的根目录.

本地测试

bundle exec jekyll serve

实际效果的话, 可以看我的主页了:

Home - Zorch’s Blog (apocaly-pse.github.io);