设置字体是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的值是你定义的字体的名称,也就是你后面使用字体时的名称。

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

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

1
2
hexo clean
hexo generate

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

代码块使用字体

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

然后再执行hexo clean && hexo generate命令清除并重新生成文件,应该就可以了。

参考文章