为Hexo的Redefine主题设定字体样式

MagicNue
  2026-04-09 22:38 2026-04-09 22:38 Created   2026-04-09 14:33:16 2026-04-09 14:33:16 Updated      

Hexo Theme Redefine 字体样式自定义部署文档

本次部署目的

Redefine部分字体的设置项目相当难找。因为以后的我会忘记这次部署，所以还得记录下本次操作步骤。
这篇文档记录了自定义 Hexo Theme Redefine 主题的字体样式，包括文章正文、标题、页面标题等各种文本元素的字体大小、行高和间距，以提升网站的视觉体验和可读性。

操作步骤

1. 修改主题配置文件

在 _config.yml 中调整基础字体设置：

1
2
3
4
5
6
7
8
9
10
11
articles:
  style:
    font_size: 18px          # 正文字体大小
    line_height: 1.6         # 行高
    headings_top_spacing:    # 各级标题顶部间距
      h1: 3.2rem
      h2: 2.4rem
      h3: 1.9rem
      h4: 1.6rem
      h5: 1.4rem
      h6: 1.3rem

2. 使用 inject 功能注入自定义样式

通常来说这些项目不会用到（除了文章页面标题相对较难找到）

在 _config.yml 中启用 inject 功能：

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
inject:
  enable: true
  head: 
    - '<style>
        /* 文章页面标题 */
        .post-page-container h1:first-child {
          font-size: 2.8rem !important;
          font-weight: 700 !important;
          color: var(--primary-color) !important;
        }
        
        /* 正文内容 */
        .markdown-body {
          font-size: 18px !important;
          line-height: 1.6 !important;
        }
        
        /* 正文标题 */
        .markdown-body h1 { font-size: 2.5rem !important; }
        .markdown-body h2 { font-size: 2rem !important; }
        .markdown-body h3 { font-size: 1.5rem !important; }
        
        /* 主页文章列表标题 */
        .home-article-title {
          font-size: 1.6rem !important;
          font-weight: 700 !important;
        }
      </style>'
  footer:
    -
    -

3. 重新生成站点

1
2
hexo clean && hexo generate
hexo server

有效的字体设置项目

配置文件中的字体设置

配置项 位置 作用 默认值
articles.style.font_size _config.yml 正文字体大小 16px
articles.style.line_height _config.yml 正文行高 1.5
articles.style.headings_top_spacing _config.yml 各级标题顶部间距 h1: 3.2rem, h2: 2.4rem…
home_banner.text_style.title_size _config.yml 主页大标题字体大小 2.8rem
home_banner.text_style.subtitle_size _config.yml 主页副标题字体大小 1.5rem

CSS 选择器对应的字体设置

选择器 作用 默认字体大小 文件位置
.markdown-body 文章正文内容 16px source/css/common/markdown.styl 3
.markdown-body h1 正文 H1 标题 3.2rem source/css/common/markdown.styl 4
.markdown-body h2 正文 H2 标题 2.5rem source/css/common/markdown.styl 5
.markdown-body h3 正文 H3 标题 1.8rem source/css/common/markdown.styl 6
.markdown-body h4 正文 H4 标题 1.5rem source/css/common/markdown.styl 7
.markdown-body h5 正文 H5 标题 1.28rem source/css/common/markdown.styl 8
.markdown-body h6 正文 H6 标题 1.2rem source/css/common/markdown.styl 9
.post-page-container h1:first-child 文章页面标题 3.2rem 通过继承默认 h1 样式
.home-article-title 主页文章列表标题 1.4rem source/css/layout/home-content.styl 10
.page-title-header 页面标题（如归档页） 3.2rem source/css/layout/page.styl 11

字体变量定义

变量名 作用 默认值 文件位置
$default-article-font-size 默认正文字体大小 16px source/css/common/variables.styl 12
$default-line-height 默认行高 1.5 source/css/common/variables.styl 12
$article-title-font-size 文章标题字体大小 3.2rem source/css/layout/article-content.styl 13

重要说明

  1. 配置文件 vs CSS 选择器：font_size 配置只影响 .markdown-body 的字体大小，不影响标题 12
  2. 文章页面标题特殊性：使用 .post-page-container h1:first-child 选择器，因为文章标题是容器内的第一个 h1 元素
  3. 响应式设计：主题包含响应式设计，在平板和移动设备上会自动调整字体大小 14
  4. 优先级：使用 !important 确保自定义样式优先级足够高

Notes

  • 修改配置文件后需要重新生成站点
  • inject 功能是推荐的自定义方式，不会影响主题源文件
  • 可以使用浏览器开发者工具检查元素的确切类名
  • 建议使用相对单位（rem）而非绝对单位（px）以保持响应式设计

Wiki pages you might want to explore:

Wiki pages you might want to explore:

Citations

File: _config.yml (L273-289)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Set the styles of the article
style:
  font_size: 16px # Font size
  line_height: 1.5 # Line height
  image_border_radius: 14px # image border radius
  image_alignment: center # image alignment. left, center
  image_caption: false # Whether to display image caption
  link_icon: true # Whether to display link icon
  delete_mask: false # Add mask effect to <del> tags, hiding content by default and revealing on hover
  title_alignment: left # Title alignment. left, center
  headings_top_spacing: # Top spacing for headings from h1-h6
    h1: 3.2rem
    h2: 2.4rem
    h3: 1.9rem
    h4: 1.6rem
    h5: 1.4rem
    h6: 1.3rem

File: _config.yml (L409-422)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# INJECT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start
# Docs: https://redefine-docs.ohevan.com/inject
inject:
  # Whether to enable inject
  enable: false
  # Inject custom head html code
  head: 
    -
    -
  # Inject custom footer html code
  footer:
    -
    -
# INJECT <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< end

File: source/css/common/markdown.styl (L1-4)

1
2
3
4
.markdown-body
  font-family $english-font-family, $chinese-font-family, sans-serif
  font-size $default-article-font-size

File: source/css/common/markdown.styl (L123-124)

1
2
+redefine-tablet()
  line-height: $default-line-height * 0.96

File: source/css/common/markdown.styl (L126-137)

1
2
3
4
5
6
7
8
9
10
11
12
h1, .h1
  font-size 3.2rem
  font-weight 650
  border-bottom solid 2px var(--fourth-text-color)
  margin-top $h1-heading-margin-top
  margin-bottom 1rem
  letter-spacing -0.025em
  line-height 1.2

  +redefine-tablet()
    font-size 1.7rem
    line-height 1.2

File: source/css/common/markdown.styl (L139-151)

1
2
3
4
5
6
7
8
9
10
11
12
13
h2, .h2
  font-size 2.5rem
  font-weight 650
  padding 3px 0
  border-bottom solid 2px var(--fourth-text-color)
  margin-top $h2-heading-margin-top
  margin-bottom 1rem
  letter-spacing -0.025em
  line-height 1.1

  +redefine-tablet()
    font-size 1.6rem
    line-height 1.1

File: source/css/common/markdown.styl (L153-163)

1
2
3
4
5
6
7
8
9
10
11
h3, .h3
  font-size 1.8rem
  font-weight 600
  margin-top $h3-heading-margin-top
  margin-bottom 0.75rem
  letter-spacing -0.025em
  line-height 1.3

  +redefine-tablet()
    font-size 1.5rem
    line-height 1.2

File: source/css/common/markdown.styl (L165-174)

1
2
3
4
5
6
7
8
9
10
h4, .h4
  font-size 1.5rem
  font-weight 600
  margin-top $h4-heading-margin-top
  margin-bottom 0.75rem
  line-height 1.4

  +redefine-tablet()
    font-size 1.4rem
    line-height 1.3

File: source/css/common/markdown.styl (L176-185)

1
2
3
4
5
6
7
8
9
10
h5, .h5
  font-size 1.28rem
  font-weight 600
  margin-top $h5-heading-margin-top
  margin-bottom 0.5rem
  line-height 1.3

  +redefine-tablet()
    font-size 1.18rem
    line-height 1.2

File: source/css/common/markdown.styl (L187-196)

1
2
3
4
5
6
7
8
9
10
h6, .h6
  font-size 1.2rem
  font-weight 600
  margin-top $h6-heading-margin-top
  margin-bottom 0.5rem
  line-height 1.2

  +redefine-tablet()
    font-size 1.1rem
    line-height 1.1

File: source/css/layout/home-content.styl (L55-67)

1
2
3
4
5
6
7
8
9
10
11
12
13
.home-article-title
  position relative
  font-weight 600
  font-size 1.4rem
  line-height 1.5
  color var(--second-text-color)
  font-family $english-font-family, $chinese-font-family, 'Noto Sans SC', sans-serif

  +redefine-tablet()
    font-size 1.3rem

  +redefine-mobile()
    font-size 1.2rem

File: source/css/layout/page.styl (L3-8)

1
2
3
4
5
6
.page-title-header
  font-size 3.2rem
  line-height 1
  font-weight bold
  color var(--second-text-color)
  margin 6px 0 36px 0

File: source/css/common/variables.styl (L139-142)

1
2
3
4
$temp-default-article-font-size = hexo-config('articles.style.font_size')
$temp-default-line-height = hexo-config('articles.style.line_height')
$default-article-font-size = $temp-default-article-font-size ? convert($temp-default-article-font-size) : 16px
$default-line-height = $temp-default-line-height ? $temp-default-line-height : 1.5

File: source/css/layout/article-content.styl (L5-5)

1
$article-title-font-size = 3.2rem
  • Title: 为Hexo的Redefine主题设定字体样式
  • Author: MagicNue
  • Created at : 2026-04-09 22:38:00
  • Updated at : 2026-04-09 14:33:16
  • Link: https://magicnue.top/posts/记录/为Hexo的Redefine主题设定字体样式/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
为Hexo的Redefine主题设定字体样式
  1. Hexo Theme Redefine 字体样式自定义部署文档
    1. 本次部署目的
    2. 操作步骤
      1. 1. 修改主题配置文件
      2. 2. 使用 inject 功能注入自定义样式
      3. 3. 重新生成站点
    3. 有效的字体设置项目
      1. 配置文件中的字体设置
      2. CSS 选择器对应的字体设置
      3. 字体变量定义
    4. 重要说明
    5. Notes
      1. Citations