在hexo搭建完成后,使用next主题,发现有些字体过大,比如标题下面提示文章发表时间、分类、标签等字体。以下提出我的修改方式(版本hexo:3.9.0、next:7.4.1)。
默认建好之后,如下图所示,我对框中的字体大小不满意。

首先想到要去主题配置文件
_config.yml
查找Font以便于修改字体大小。通过搜寻,可以看到以下的结果:
font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: false
# Uri of fonts host, e.g. //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: Lato
size:
# Font settings for site title (.site-title).
title:
external: true
family:
size:
# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family:
size:
# Font settings for posts (.post-body).
posts:
external: true
family:
# Font settings for <code> and code blocks.
codes:
external: true
family:
可以看出只有全局、题目、多级标题、文章、代码的字体设置,并没有细致到我们需要的位置,于是我思考一定有一个地方设置了多种不同情况下所用到字体的大小。通过各方面的搜索,发现在
themes\next\source\css\_variables
下的
base.styl
中有这么一块:
// Font size
$font-size-base = 1em;
$font-size-base = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit';
$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.375em;
看到了和我猜想一样的设置了不同情况下的字体的大小,其中
font-size-smallest
控制的就是红框中的字体大小,我进行了如下修改:
$font-size-smallest = .65em;
$font-size-smaller = .75em;
$font-size-small = .8em;
结果如下:
在页尾处的字体大小由
$font-size-small
控制,修改后结果如下:
至此就完成了文字大小的修改。