Hugo自定义字体

现在这个博客由 Hugo + hugo-clarity 皮肤驱动，大毛病没有。只是这个 theme 自带的字体是 Metropolis，操作系统默认没有，用户需要下载，这会拖慢网页加载速度，按照配置中文字体会回退到 sans-serif，也不是个好方案。因此，需要自定义这个皮肤的字体。

1. 首先找到字体并修改配置

hugo-clarity 皮肤的字体配置控制文件如上所示，css 由 sass 生成，下面介绍修改方法：

• _fonts.sass 配置

  1@font-face
  2    font-family: myfonts
  3    src: local('-apple-system'),local('BlinkMacSystemFont'),local('Helvetica Neue'),local('PingFang SC'),local('Microsoft YaHei'),local('Source Han Sans SC'),local('Noto Sans CJK SC'),local('WenQuanYi Micro Hei'),local('sans-serif')
  

  这个文件告诉你去哪里找字体文件，local('xxx') 表示去电脑本地找 xxx 字体，再给这些字体集合取个名字 叫 myfonts，名字根据自己喜好取，都是 font-face 的语法。我这个参考的知乎的 font-family :

  1font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
  2  Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
  3  sans-serif;
  

  优先级从前到后，先找苹果系统的默认字体，再找 windows 字体，Sans 等字体，最后找 Linux 的文泉驿微米黑。用户用什么操作系统就优先命中对应的系统自带字体，不用消耗网络带宽下载，拖累网页加载速度。

  • _variables.sass 配置

  

  变量文件设置，如图所示 --font 的地方填上一步的字体集合名字。这样 sass CSS 预处理器，在编译的时候就能生成正确的 font-family。

  • fonts 目录

这目录就是放皮肤自定义字体的，对字体有高要求的时候使用(我个人不用)。参考 hugo-clarity 皮肤的配置

1@font-face
2  font-family: 'Metropolis'
3  font-style: normal
4  font-weight: 200
5  src: local('Metropolis Extra Light'), local('Metropolis-Light'), url('#{$fontsPath}Metropolis-ExtraLight.woff2') format('woff2'), url('#{$fontsPath}Metropolis-ExtraLight.woff') format('woff')
6  font-display: swap

看上面配置的意思，就是先去本地电脑找这个字体，找不到就去项目的字体目录找(目录就是第一张图的 fonts 目录)，找到后在做一定的格式转换。其它皮肤的字体更换，网上也有文章说明，这里不再赘述，原理都差不多。

2. 重新编译项目

这里特别说明下，如果你用的是标准版 hugo，它不会帮你转译 Sass 到 css，官方解释如下：

Hugo is available in two editions: standard and extended. With the extended edition you can:

• 1. Encode WebP images (you can decode WebP images with both editions)
• 2. Transpile Sass to CSS using the embedded LibSass transpiler

We recommend that you install the extended edition.

我一开始的时候，就是没有注意到这一点，生成的 style 文件总是不变，各种痛苦调试都无效。最后把相关文件都删掉后试验，hugo 编译时才提示要去下载 extended 版本，前后耽误近 2 小时，甚至还去学习了下 Sass 语法...

所以，以后怪怪改用 extended 版本就没错了，惨痛经历。

3. 代码字体

最后，Hugo 的编程字体是可以单独配置。本文的代码英文字体和正文字体就不一样，看字母 G 能看出差别。

 1  [highlight]
 2    codeFences = true
 3    guessSyntax = true
 4    hl_Lines = ""
 5    lineNoStart = 1
 6    lineNos = true # always set to true # else line numbers won't show at all! even when you toggle them on in the UI
 7    lineNumbersInTable = false # toggling this on (i.e to true) or deleting this line will break the code blocks functionality. Will
 8    noClasses = false
 9    style = "monokai"
10    tabWidth = 2

如上所示，高亮模式选择 monokai，_syntax.sass文件中 code 和 pre 的:

1font-family: "Monaco", monospace;

如此一来，选择不同代码高亮模式，可以根据需要手动设置不同代码字体(测试从 monokai 到 tango 字体不变)