本文手把手教你如何在Hexo的Butterfly主题中优雅地引入自定义字体，助你轻松打造个性化博客视觉体验，告别默认字体的单调限制！

创建font.css

在/source/css中（没有这个目录请手动创建）创建一个font.css并编辑：

此为我的font.css，你可根据需要自行修改

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
    font-family: HYTMR; /* 声明字体名称（可随意） */
    font-display: swap; /* 字体懒加载对SEO有帮助 */
    src: url(/fonts/HYTangMeiRen55W.woff2) format("woff2")
} /* url写指向字体的目录或链接，format里写字体的格式 */

/* 载入字体 */
body {
    font-family: 'HYTMR', sans-serif;
} 
/* font-family中的第一个填前面声明的字体名称 */
/* 第二个填sans-serif，以达到字体懒加载的目的，优化SEO /*

注意事项

  • 在font-family中声明字体名称（可随意填写）
  • format里写字体的格式
  • 载入字体时的第一个应写你刚才声明的字体名称

引入css

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/font.css">

这样就完成了字体的引入