PrimeEdge 主题教程

字体设置

自定义博客字体

字体设置

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

使用系统字体

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

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

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

使用 Google Fonts

1. 选择字体

访问 Google Fonts 选择你喜欢的字体，推荐使用：

  • 正文: Noto Sans SC、LXGW WenKai
  • 标题: Noto Serif SC
  • 代码: JetBrains Mono、Fira Code

2. 引入字体

在 layouts/partials/custom/head.html 中添加：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

3. 应用字体

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

body {
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, 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. 预连接 — 使用 preconnect 加速外部字体加载
  4. 子集化 — 中文字体文件较大，建议使用子集化工具只保留常用字
  5. 回退栈 — 始终提供系统字体作为回退

推荐字体组合

组合一：现代简洁

body { font-family: "Noto Sans SC", -apple-system, sans-serif; }
code { font-family: "JetBrains Mono", monospace; }

组合二：文艺清新

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

组合三：专业沉稳

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

下一步

评论

0%