Citrusea

关于主题和字体

于 2023-07-30 重写。

一个好看的主题使人赏心悦目, Hexo 有很多主题,这些主题中不乏一些很华丽的。本着简洁的观念,选择了 july 作为网站的主题。之后的日子里也对这个主题进行了进一步符合我个人使用的修改。主要修改内容:

  1. 修改了首页的文章排列
  2. 添加了评论系统
  3. 添加了文章底部的导航栏
  4. 给文章头部添加了作者信息和 tag
  5. 修改超链接的颜色
  6. 修改字体为思源宋体
  7. 修改引用样式

目前的修改大概就是这些,原本打算把目录也加上去的,但是使用的效果不佳,并且导致评论和底部导航栏的样式出错,所以就去掉了目录。经过评估后发现我的文章其实也不大需要目录,毕竟文章长到需要目录的情况。当然,后续如果找到更好的添加目录的方法,可能也会加一个目录。

字体

对于一个网站的字体,阅读观感上除了楷体外,第二适合的应该也就是衬线体了。无衬线体其实并不适合进行长篇的阅读。衬线体无论是阅读还是其他都是极佳的。而且个人还是更喜欢使用衬线体。

会选择思源宋体的一大原因是因为开源免费,另一个就是因为教程还是相对多的。使用起来也比较方便。

修改网站的字体有两种方式,一种是通过 Google Font 引入字体,一种是通过加载本地字体的方式。

通过 Google Font 引入字体

使用通过 Google Font 方式引入字体的方式,只需在 CSS 文件中加入

import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap');

然后在 font-family 中加入 'Noto Serif Sc', serif 即可。

我的 font-family 样式:

font-family: "PingFang SC", Palatino, 'Noto Serif SC', serif, 'Times New Roman', Times;

本地字体加载

通过加载本地字体的方式略复杂,因为中文字体的体积很大,直接进行加载的话会导致网站的加载速度变慢,因为要下载字体进行加载后才能加载完成。所以要对字体进行字体压缩,具体可以参照这个教程。如果是使用思源宋体的话可以参照下面这串代码。

pyftsubset NotoSerifSc.otf --unicodes-file=sc_unicode.txt

压缩了之后的字体包很小,10M 的思源宋体被压成了只有 2M ,但是现在把字体转换成 woff2 的方式我给忘了,所以暂时无法使用啦。

2023-2024 Citrusea