Hexo NexT主題將網站字體改為宋體

最後更新於 2021 年 9 月 15 日

使用的NexT版本：Hexo NexT v7.4.1
封面圖為我的Hexo BLOG

網站字體的大小你可以在.\themes\next\source\css\_variables\base.styl中修改

// Font size
$font-size-base = 1em;

至於網站字體顏色則是在BLOG根目錄\source\_data\styles.styl加上

//修改字體顏色
body {
    color: #000; #顏色色碼
}

下載Linux_Biolinum字體

下載鏈結：Download
解壓縮至BLOG根目錄\source\fonts，若是沒有fonts請自行新增。

字體配置

中文

修改.\themes\next\_config.yml font處成下方內容

font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: true
 # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: https://fonts.googleapis.com
 # Font options:
 # `external: true` will load this font family from `host` above.
 # `family: Times New Roman`. Without any quotes.
 # `size: x.x`. Use `em` as unit. Default: 1 (16px)
 # Global font settings used for all elements inside <body>.
global:
external: true
family: Noto Serif SC
size:

接著修改 .\themes\next\source\css\_variables\base.styl font-family-monospace成下方內容

$font-family-monospace    = consolas, Menlo, $font-family-base, monospace

英文

修改 .\themes\next\source\css\_variables\base.styl font families處成下方內容

// Font families.
$font-family-chinese      = "Linux Biolinum"
$font-family-base         = $font-family-chinese, sans-serif
$font-family-base         = $font-family-chinese, get_font_family('global'), sans-serif if get_font_family('global')

在 BLOG根目錄\source\_data\styles.styl 加上：

@font-face {
  font-family: 'Linux Biolinum';
  src: url("/fonts/LinBiolinum_Rah.eot");
  font-display: swap;
  src: url("/fonts/LinBiolinum_Rah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_Rah.woff2") format('woff2'), url("/fonts/LinBiolinum_Rah.woff") format('woff'), url("/fonts/LinBiolinum_Rah.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Linux Biolinum';
  src: url("/fonts/LinBiolinum_RBah.eot");
  font-display: swap;
  src: url("/fonts/LinBiolinum_RBah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_RBah.woff2") format('woff2'), url("/fonts/LinBiolinum_RBah.woff") format('woff'), url("/fonts/LinBiolinum_RBah.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Linux Biolinum';
  src: url("/fonts/LinBiolinum_RIah.eot");
  font-display: swap;
  src: url("/fonts/LinBiolinum_RIah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_RIah.woff2") format('woff2'), url("/fonts/LinBiolinum_RIah.woff") format('woff'), url("/fonts/LinBiolinum_RIah.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
}

有興趣的話，你也可以在Google Fonts尋找喜歡的字體自行修改。