PrimeEdge 主题教程

字体设置

自定义博客字体

字体设置 #

PrimeEdge 支持自定义正文字体和代码字体，你可以使用系统字体或引入第三方字体。

使用系统字体 #

主题默认使用系统字体栈，无需额外配置即可获得良好的显示效果：

/* 默认字体栈 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

这种方式的优点是加载速度快，无需下载额外字体文件。

使用本地或系统字体 #

1. 选择字体 #

国内站点不建议依赖海外字体服务。优先使用系统字体；如果确实需要品牌字体或特殊中文字体，把字体文件下载后放到 static/fonts/ 本地引用。

  • 正文: 系统字体栈、LXGW WenKai
  • 标题: 系统字体栈、本地宋体/黑体文件
  • 代码: SF Mono、Consolas、本地 JetBrains Mono

2. 引入字体 #

只推荐两种方式：

  • 不下载字体：直接使用系统字体栈，加载最快。
  • 需要指定字体：把 .woff2 文件放到 static/fonts/，通过 @font-face 本地加载。

3. 应用字体 #

在 assets/css/custom.css 中配置：

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

code, pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

使用本地字体 #

1. 放置字体文件 #

将字体文件放入 static/fonts/ 目录：

static/fonts/
├── LXGWWenKai-Regular.woff2
├── LXGWWenKai-Bold.woff2
└── JetBrainsMono-Regular.woff2

2. 定义 @font-face #

在 assets/css/custom.css 中：

@font-face {
  font-family: "LXGW WenKai";
  src: url("/fonts/LXGWWenKai-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LXGW WenKai";
  src: url("/fonts/LXGWWenKai-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

3. 应用字体 #

body {
  font-family: "LXGW WenKai", -apple-system, sans-serif;
}

字体优化建议 #

  1. 字体格式 — 优先使用 WOFF2，压缩率最高
  2. font-display — 使用 swap 避免字体加载时的空白闪烁
  3. 减少外链 — 国内站点避免依赖外部字体服务，不要把海外字体服务放在关键渲染路径
  4. 子集化 — 中文字体文件较大，建议使用子集化工具只保留常用字
  5. 回退栈 — 始终提供系统字体作为回退

推荐字体组合 #

组合一：现代简洁 #

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif; }
code { font-family: "SF Mono", Consolas, monospace; }

组合二：文艺清新 #

body { font-family: "LXGW WenKai", "PingFang SC", sans-serif; }
code { font-family: "Fira Code", monospace; }

组合三：专业沉稳 #

body { font-family: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif; }
code { font-family: "SF Mono", Consolas, monospace; }

下一步 #

评论

0%