//MAGICBOOK / 魔法书POSTS / 2026-04-09-HEXO-REDEFINE
74 POSTS66 TAGS3 CATEGORIES
CodingSTATUS / PUBLISHED

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

这篇文档记录了自定义 Hexo Theme Redefine 主题的字体样式。

FILE / 20260409-03
AUTHOR / MAGICNUE
TYPE / CODING RECORD

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

本次部署目的

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

操作步骤

1. 修改主题配置文件

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

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 功能：

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. 重新生成站点

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文章正文内容16pxsource/css/common/markdown.styl 3
.markdown-body h1正文 H1 标题3.2remsource/css/common/markdown.styl 4
.markdown-body h2正文 H2 标题2.5remsource/css/common/markdown.styl 5
.markdown-body h3正文 H3 标题1.8remsource/css/common/markdown.styl 6
.markdown-body h4正文 H4 标题1.5remsource/css/common/markdown.styl 7
.markdown-body h5正文 H5 标题1.28remsource/css/common/markdown.styl 8
.markdown-body h6正文 H6 标题1.2remsource/css/common/markdown.styl 9
.post-page-container h1:first-child文章页面标题3.2rem通过继承默认 h1 样式
.home-article-title主页文章列表标题1.4remsource/css/layout/home-content.styl 10
.page-title-header页面标题（如归档页）3.2remsource/css/layout/page.styl 11

字体变量定义

变量名作用默认值文件位置
$default-article-font-size默认正文字体大小16pxsource/css/common/variables.styl 12
$default-line-height默认行高1.5source/css/common/variables.styl 12
$article-title-font-size文章标题字体大小3.2remsource/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)

# 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)

# 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)

.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)

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

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

  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)

  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)

  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)

  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)

  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)

  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)

      .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)

.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)

$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)

$article-title-font-size = 3.2rem