Next主题自定义CSS样式字体

设置字体是CSS样式中的一个小方面，实际上也就是自定义CSS样式了。CSS倒不难写，主要是得搞清楚在哪个文件里写才有效果。

这里讲的是Hexo的主题Next的CSS样式自定义，Next版本为5.1.0。其他版本不一定有对应的文件，未经测试。

样式文件

假设Next主题的目录名称为next，如果要自定义CSS样式，只要在themes/next/source/css/_custom/custom.styl文件中写入相应的CSS代码就行了。

注意

文件后缀为styl，猜测可能是使用stylus语法的样式文件。但是我试过了，直接写CSS代码是可行的。
涉及到文件引用的地方要注意路径。如果使用相对路径，默认当前目录为themes/next/source/css/。
注意要执行hexo clean命令，清除已经生成的文件。然后再执行hexo generate重新生成文件。否则样式可能不会生效。
如果页面刷新后，新的样式没有生效，建议检查public/css/main.css中有没有加入新的CSS代码。

自定义字体

字体文件

当前我只能确定支持ttf以及eot格式的字体文件。定义一个字体，首先要确定字体文件的路径。我把字体文件iosevka-regular.ttf放在source/fonts/路径下，hexo生成页面时会把fonts目录复制到public/中。我的网站是建在根目录下的，字体文件引入的路径为/fonts/iosevka-regular.ttf。

在themes/next/source/css/_custom/custom.styl文件中加入以下代码，其中font-family的值是你定义的字体的名称，也就是你后面使用字体时的名称。

@font-face{
    font-family: Iosevka;
    src: url('/fonts/iosevka-regular.ttf');
}

然后要在命令行中执行以下代码

hexo clean
hexo generate

这样，该样式就能在主题中生效了。如果页面刷新后没有改变，可能是缓存的问题。查看public/css/main.css文件，看看文件末尾有没有新加入的CSS代码。

代码块使用字体

既然字体（CSS样式）已经生效了，那就可以在主题中使用该字体了。

修改主题配置文件themes/next/_config.yml中codes的配置内容即可。主题会优先使用该字体，当该字体不存在时，会使用其他预设的字体。另外建议把host这一项改为国内的反代理服务器，如//fonts.css.network，以提升访问速度。默认是谷歌的服务器，国内连不上。

font:
  enable: true
  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  host: //fonts.css.network
  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: Lato
  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family:
  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family:
  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family:
    size:
  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Iosevka
    size: 12