Hexo NexT 字体美化类Meme

前言

在网上逛到了用Hugo做的博客，发现Meme主题很好看，研究了一会，发现主要是字体好看，也不打算迁移了，于是便开始设置Hexo的NexT主题为相应的字体。

本人配置：

Win10
hexo: 5.2.0
hexo-cli: 4.2.0
node: 12.19.0
NexT主题Pisces样式

更换字体

Hugo Meme主题字体：思源宋体 Noto Serif Simplified Chinese

Google Font：https://fonts.google.com/noto/specimen/Noto+Serif+SC

在Hexo Next中更改字体样式，只需要更改NexT的配置文件themes\next_config.yml

将font的enable改为true，并将其中所有的模块的字体都写上Noto Serif SC，这样hexo会自动从fonts host获取字体

# ---------------------------------------------------------------
# Font Settings
# See: https://theme-next.org/docs/theme-settings/#Fonts-Customization
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://www.google.com/fonts)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # 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: 

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Source Code Pro

更改字体大小

问题：hexo next字体大小更改后无效

换完了字体，设置的字体大小明明默认是1em，也就是16px，但正文字体很大，有1.125em，也就是18px。

谷歌了一下，查到除了上方themes\next_config.yml可以配置字体样式和大小，还有一个直接控制字体的文件themes\next\source\css_variables\base.styl

如下就是默认配置，可以看到没什么问题，正文就应该是1em。

// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.5em;

问题定位：既然网页上正文字体的样式是1.125em，直接在themes中查1.125em，发现只有上方代码里的font-size-large是1.125。于是搜索font-size-large，终于被我逮到了，说的就是你themes\next\source\css_common\components\post\post.styl

.post-body {
  font-family: $font-family-posts;
  word-wrap();

  +desktop-large() {
    font-size: $font-size-large ;
  }

  .exturl .fa {
    font-size: $font-size-small;
    margin-left: 4px;
  }

  .image-caption, .figure .caption {
    color: $grey-dark;
    font-size: $font-size-small;
    font-weight: bold;
    line-height: 1;
    margin: -20px auto 15px;
    text-align: center;
  }
}

注意5-7行代码，这个文件默认配置的正文字体大小是font-size-large，怪不得正文不是1em，改成font-size-medium就好了。

更改代码块字体

将themes\next\source\css_variables\base.styl文件中table-font-size改为80%，这样代码块字体就自动调整为正文的80%

// Table
// --------------------------------------------------
$table-border-color             = $grey-lighter;
$table-font-size                = $font-size-small;
$table-cell-border-bottom-color = $grey-lighter;
$table-row-odd-bg-color         = #f9f9f9;
$table-row-odd-bg-color-dark    = #282828;
$table-row-hover-bg-color       = $whitesmoke;
$table-row-hover-bg-color-dark  = #363636;

参考：