给安知鱼主题自定义博客字体

老刘博客2024-07-142026-02-16

安知鱼主题是一款基于 Hexo 框架的简洁美观博客主题，由 hexo-theme-butterfly 修改而来，功能丰富且易于定制，适用于个人博客、技术分享等网站建设。今天我们来调整一下安知鱼主题的字体，事情的起因是有位群友不会如何自定义博客字体，总是在群中询问，所以写了这一篇文章

1..引入 CSS

在 source\css 文件夹里新建一个 font.css 文件，在文件中写入，你也可以选择在一个已经引入的 CSS 文件，在已经存在的 CSS 文件中进行添加

/* 字体css */
@font-face{
  font-family: 'HuangkaihuaLawyerFont'; 
  <!-- 其中HuangkaihuaLawyerFont是引入的字体的名称，可以自定义 -->
  font-display: swap;
  src: url('/ttf/huangkaihuaLawyerfont-2.ttf') format("truetype");
  <!-- url中填写自己的字体地址，我使用的是本地文件夹所以用的是相对路径，如果是外部引用的话在其中写入链接地址就好了 -->
}

在安知鱼主题的配置文件中搜索 inject ，就会找到如下代码

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

  bottom:
    # 自定义js
    # - <script src="/js/xxx"></script>

在 head 处进行自定义 CSS 文件的引入工作：

1	- <link rel="stylesheet" href="/css/font.css" media="defer" onload="this.media='all'">

添加之后的代码如下

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="/css/font.css" media="defer" onload="this.media='all'">

  bottom:
    # 自定义js
    # - <script src="/js/xxx"></script>
    - <script src="/js/countdown.js"></script>

这个 CSS 文件的地址请根据你自己所创建的地址来进行引用

2.修改配置文件

在安知鱼主题的配置文件中搜索 Global font settings ，就会找到如下代码

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 16px
  code-font-size:
  font-family:
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link:
  font-family: PingFang SC, 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

在其中修改 font-family ，两个都需要修改，最后修改的样式为

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 16px
  code-font-size:
  font-family: 'HuangkaihuaLawyerFont'
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link:
  font-family: 'HuangkaihuaLawyerFont'