spartazhc's blog

0%

Next主题字体配置

发表于 分类于 ， 阅读次数： Valine：
本文字数： 4.7k 阅读时长 ≈ 4 分钟

我对博客字体的要求是希望能使用思源宋体，实际配置中发现还需要让正文行内的代码部分字体减小的效果。这篇博客记录了我在配置字体的时候学到的一些机制以及踩到的坑。

字体配置是如何生效的

就我的理解，Hexo可以帮助把我的博客静态化，产生一系列html，我的字体配置会体现在html中，具体是：

  1. 在html的<head>中，通过超链接方式对于字体的引用。
1
2
<!-- 这个链接和在google fonts里选中字体，Embed模式里给的链接一样-->
<link rel="stylesheet" href="https://fonts.loli.net/css?family=Noto Serif SC:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|EB Garamond:300,300italic,400,400italic,700,700italic|Source Code Pro:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
  1. 有了上面的stylesheet，在CSS里就可以使用font-family: Noto Serif SC;去使用字体了。具体的，从Chrome Developer Tools可以看到：
1
2
3
4
5
6
7
8
9
10
// 这里的字体顺序可以对后续字体变量的描述加以验证
.post-body {
  font-family: 'Noto Serif SC', "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
...
code {
  font-family: 'Source Code Pro', consolas, Menlo, monospace, "PingFang SC", "Microsoft YaHei";
}

字体变量是如何定义的

这里分为两个层面，一个是底层的字体变量定义，另一个是Next模板配置文件_config.yml中提供的对字体变量覆盖的选项。

字体变量的定义_base.styl

在source/css/_variables/base.styl里有关于字体变量的定义，主要关注一下字体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Font families.
$font-family-chinese      = "PingFang SC", "Microsoft YaHei";

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');

因为字体有Fallback机制，会按照定义的顺序尝试使用字体，如果不可用会换到下一个，从这段关于字体变量的定义不难发现，$font-family-base的第一个选项是get_font_family('global')，也就是在主题配置文件里设置的global字体，然后才是第一行定义的$font-family-chinese，而下面的logo、headings、posts则都是以base为基础，如果在主题配置文件里定义了相关的则覆盖。$font-family-monospace又加了几项备用的等线字体。

Next主题配置文件_config.yml

Next主题的配置文件_config.yml里有一段关于字体配置的选项：

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
32
33
34
35
36
37
38
39
40
font:
  enable: true

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

  # 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: EB Garamond
    family: Noto Serif SC
    size: 0.9

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Lobster Two
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    #family: Roboto Slab
    family: EB Garamond
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    #family: Roboto Slab

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

就像上一节讲的，这里填写相应的字体会作为最优先使用的字体，这边的缺点是这个配置文件里不能在一项里面配置多个字体。

字体获取

字体可以在Google Fonts 挑选，填入_config.yml里面相应类型的family字段即可。

看别的文章讲fonts.googleapis.com的稳定性问题，这些文章一般会建议使用fonts.loli.net，这次看到这篇帖子前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务，才知道原来是后者反代了前者。

1
2
3
4
font:
  enable: true
  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.loli.net

正确地修改字体样式

以上的配置只能配置字体、设置字体大小，如果要进一步修改字体样式：如定制code类型的字体大小，就需要自定义样式。新版本的Next自定义样式不再使用next/source/css/_custom/custom.styl，而是用了更通用的，放在hexo的source目录下的方式。

首先在_config.yml里面启用相应想要自定义的部分：

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

但是这个自定义样式的方式不能覆盖变量默认定义的值，只能先注释掉变量默认的定义，然后在自定义变量里面定义。

在styles.styl里可以对一些样式进行更改（更通用地），比如我迫切需要的正文中的<code>部分字体减小。

减小正文中<code>的字体大小

默认配置下，正文中的<code>部分和正文字体大小是一样的（之前用的老版本不是这样），视觉效果很差，我想把这部分的字体减小为正文字体的一定百分比。

一番寻找之后，找到的是定义代码框中字体大小的$table-font-size = $font-size-small;，但这条设置只能控制代码框里面的字体，不能控制正文中的<code>部分，找了挺久没有找到相关的设置，因此只能自定义。在source/_data/styles.styl写：

1
2
3
4
code {
	margin: 0px 4px;
	font-size: 80%;                                                        
}

这样就可以达到想要的效果了。

踩的坑

一些教程太老了，可能一方面是当时的Next版本对各种配置的支持性没有现在好，然后另一方面也是因为一开始自己对这些配置并不了解，逐渐踩坑逐渐理解了这些。

因为我一开始只是想使用思源宋体，看的教程Google Fonts 已支持思源宋体！，他的做法是自己从google fonts上获取了Embed的链接，然后放到next/layout/_partials/head/external-fonts.swig里面（也没写怎么去加载这个.swig），相当于是自己强行在html的head里又贴了一段<link rel="stylesheet"。

并且，当时的Next版本自定义格式使用的是next/source/css/_custom/custom.styl，我在v7.8.0用这种方式发现不生效，查了一下改了自定义的机制，新机制确实更合理了。

参考

欢迎关注我的其它发布渠道