站点美化｜自定义站点字体

阅前提示

本文方法已知适用于butterfly及其二次开发主题，不保证其他主题可用性，其他主题请自行判断

请务必在选择使用字体前确认该字体已开源且可供个人使用/商用，如因下载使用非开源字体、商用已标明“不可商用”的字体等原因导致的侵权赔偿问题我方概不负责

自定义字体步骤

以下教程请根据实际情况选择

配置css文件

在custom.css文件内新增以下内容

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

在博客目录/source/css文件夹下新增custom.css文件，如source目录下无css文件夹请先新增文件夹

在文件内写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}
上述属性定义
  1. font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
  2. src属性值中首先指定了字体文件所在的路径。
  3. format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
  4. font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
  5. 支持格式：.eot(老版本IE)，.otf，.ttf，.woff，*.woff2(推荐)

在主题配置文件中引入字体

在主题配置文件中找到字体引入部分，此处以_config.butterfly.yml为例

在对应配置的最前面写上你的自定义字体名称

1
2
3
4
5
6
7
8
9
10
11
12
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: '15px'
  code-font-size: '14px'
  font-family: 自定义字体名称, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  code-font-family: 自定义字体名称, Consolas, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: 
  font-family: 自定义字体名称, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif

本地启动hexo进行预览

1
hexo cl; hexo s

其它

如果您找到了他人公开的在线字体链接，可将该链接写入css文件中：

1
2
/* 字体文件地址(相对或者绝对路径都可以) */
src:url()

的括号内，随后重新部署即可查看

额外教程

因为很多站长（包括我自己）都是把hexo博客托管在vercel的，如果使用本地引入字体文件的方式可能会导致字体文件的路径流量激增，严重的甚至还可能导致vercel服务超量封号。因此我们还可以考虑github＋cloudflare pages的形式引入字体文件。具体操作方式如下：

  1. 在github新建一个仓库，起一个喜欢的、合适的名字
  2. 将字体文件上传至对应仓库（因该仓库仅作加载字体用途，为了不使用git上传可在创建时勾选“创建一个readme.md文件”）
  3. 在cloudflare pages处新建项目，找到自己对应的github仓库
  4. 无需配置任何环境变量，直接确认部署
  5. 访问https://默认分配域名/文件路径/字体文件名.文件格式链接，如链接正确则可能会触发自动下载
  6. 将对应链接写入css文件的url引入括号内
  7. 部署，查看效果
注意事项
  1. 上述步骤已默认您有cloudflare账号，且知晓cloudflare pages的新建位置。
  2. 直接访问cloudflare默认分配域名无任何内容为正常现象，可放心使用
  3. 如在github仓库将字体文件直接上传至根目录（外部无嵌套文件夹），则您访问对应链接时只需输入https://默认分配域名/字体文件名.文件格式即可
  4. 也可绑定自己的域名进行引入，由于此配置并非必要，因此不再赘述