zhuzilin's Blog

about

博客字体更新

date: 2021-11-15
tags: js  gatsby  typography  

今天在研究调度器的时候看到了这样的一篇博文

觉得这个字体很好看(原链接比截图好看),所以就把博客的英文部分的字体改成了 Quattrocento Sans。这里要注意,因为这个字体属于 Google Fonts,所以需要在 typography.js 中添加下载部分:

  headerFontFamily: ["SimHei", "Quattrocento Sans", "sans-serif"],
  bodyFontFamily: ["SimSun", "Quattrocento Sans", "serif"],
  googleFonts: [
    {
      name: "Quattrocento Sans",
      styles: ["Regular 400", "Bold 700"],
    }
  ],

为了能让标题用上粗体,还在 blog-post.css 中加上了:

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

除了更新字体,为了防止图片的外链生效,我在尝试把之后要保存的图片放在 static/img 目录下。但是目前因为 host 在了 zhuzilin.github.io/blog/ 下,所以图片需要设置为 /blog/img/...,不然部署上去之后会显示不出来。这点之后该怎么处理之后还是要研究一下。

更新前:

更新后: