15.主题魔改：自定义全站字体

15.主题魔改：自定义全站字体

前言：功能介绍

本指南将向您展示如何通过引入外部字体文件（如 .ttf, .woff2 等格式），来替换 Anzhiyu 主题的默认字体，让您的博客从视觉上独一无二。

核心流程概览
  1. 准备并放置字体文件：将您想使用的字体文件放到博客的源文件目录中。
  2. 创建CSS文件以定义字体：通过自定义CSS中的 @font-face 规则来“声明”这个新字体。
  3. 在主题配置中注入并应用新字体：让主题加载包含新字体的CSS文件，并指定全局文本使用该字体。
第一步：准备并放置您的字体文件

  1. 获取字体文件

    • 首先，您需要获得您想使用的字体文件。常见的格式有 .ttf, .otf, .woff。强烈推荐使用 .woff2 格式，因为它专为网页优化，文件体积最小，加载速度最快，woff2 格式拥有更先进的压缩算法，这意味着同一个字体，.woff2 格式的文件体积通常会比 .otf 小 30% - 50% 甚至更多，可以去网上搜索ttf/otf转woff2转一下即可

  2. 放置字体文件

    • 在您博客的 source 目录下，创建一个新文件夹，命名为 fonts。
    • 将您的字体文件（例如 my-custom-font.woff2）放入这个新创建的文件夹中。
    • 最终文件路径示例：source/fonts/my-custom-font.woff2
第二步：创建并注入字体CSS文件
  1. 创建CSS文件
  • 在您博客的 source/css/ 目录下，新建一个文件，命名为 font.css。

  1. 在 font.css 中定义字体

    • 将下面这段CSS代码完整复制到您刚创建的 font.css 文件中，并根据注释进行修改。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* --- 定义英文字体 (包含数字和常用标点) --- */
    @font-face {
        font-family: 'MyHybridFont'; /* 【重要】给这个“混合字体”起一个统一的名字 */
        font-display: swap;
        src: url('/fonts/custom_en.woff2') format('woff2');
        /* 指定该字体只应用于ASCII字符、数字和基本标点符号 */
        unicode-range: U+0020-007E, U+00A0-00FF; 
      }
      
      /* --- 定义中文字体 --- */
      @font-face {
        font-family: 'MyHybridFont'; /* 【重要】使用和上面完全相同的名字 */
        font-display: swap;
        src: url('/fonts/custom_cn.woff2') format('woff2');
        /* 指定该字体只应用于中文字符区域 (这里涵盖了大部分常用汉字和全角符号) */
        unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF;
      }

  2. 在主题配置中注入 font.css

    • 打开您主题的配置文件 (themes/anzhiyu/_config.yml)。
    • 找到 inject: 配置项，在 head: 列表中添加对 font.css 的引用。
    1
    2
    3
    4
    5
    6
    inject:
      head:
        # - 其他 head 内容
        # 引入您的自定义字体样式
        # 引入自定义字体样式文件
        - '<link rel="stylesheet" href="/css/font.css">'
第三步：在主题配置中应用新字体

  1. 打开主题配置文件 (themes/anzhiyu/_config.yml)。

  2. 找到 font: 和 blog_title_font: 这两个部分。

  3. 将 font-family 的值修改为您在 font.css 中定义的字体名称（在我们的例子中是 MyCustomFont）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # Global font settings (全局字体设置)
    font:
      global-font-size: 16px
      code-font-size:
      # 【修改这里】将全局字体设置为您在CSS中定义的字体名
      # 建议在后面加上一个通用的后备字体，如 , sans-serif
      font-family: 'MyHybridFont', sans-serif
      code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

    # Font settings for the site title and site subtitle (网站标题和副标题字体设置)
    blog_title_font:
      font_link:
      # 【修改这里】将博客标题字体也设置为您的自定义字体
      font-family: 'MyHybridFont', sans-serif
    • 请确保这里填写的字体名称，与您在 @font-face 中定义的 font-family 完全一致。