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 字體不變)