第十六篇 Hexo 魔改实录 | 为博客更换字体

效果预览

更换前 更换后

具体流程

1 下载字体文件

  • 链接：DingTalk-JinBuTi；
  • 也可以下载其他字体，需要包含.ttf文件；
  • 下载好字体后，在根目录 source\custom 中创建 font 文件夹，并将字体文件复制进去。

2 创建CSS文件

  • 在根目录 source\custom\css 中创建 font.css 文件；
  • 打开 font.css 文件，添加以下内容：
1
2
3
4
5
6
7
8
@font-face {
    font-family: 'DingTalk-JinBuTi';
    src: url('/custom/font/DingTalk-JinBuTi.woff2') format('woff2'),   /* 提供 WOFF2 格式 */
         url('/custom/font/DingTalk-JinBuTi.woff') format('woff'),     /* 提供 WOFF 格式 */
         url('/custom/font/DingTalk-JinBuTi.ttf') format('truetype');  /* 提供 TTF 格式 */
    font-weight: normal;
    font-style: normal;
}

3 修改主题配置文件

  • 定位到 _config.anzhiyu.yml 文件，搜索 Global font settings，修改如下配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
# 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: DingTalk-JinBuTi
  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: DingTalk-JinBuTi, PingFang SC, 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

注意：这里的两个font-family 都需要添加 DingTalk-JinBuTi 字体，否则会导致字体不生效。