pagelumi让文字亮起来
排版与设计

如何通过模板设计调整文章的字体、颜色与间距

从复制内置模板开始,对照当前编辑器的实际字段调整字号、行高、颜色和段落间距,再应用到自己的文章。

作者:PageLumi发布于 更新于 约 4 分钟
模板字体、蓝色标题与段落间距的示意插画
文章目录

要解决什么问题

内置模板已经能完成排版,但你希望标题颜色更贴合文章、正文更松弛,或者段落之间留出更多空间。可以在「模板设计」中复制一套内置模板,再修改具体字段,保存为自己的模板。正文仍留在排版工具的草稿中,模板设置负责外观。

操作步骤

1. 从内置模板复制一份

点击顶部导航「模板设计」。在「内置模板」区域选择一套接近目标的样式,点击「复制并编辑」。也可以使用右上角「新建模板」,从默认设置开始。

编辑器顶部的 Template name 输入框是模板名称,Description (optional) 是可选说明。填写一个便于辨认的名字,例如「清爽周报」。当前模板编辑器使用英文字段,下面按界面上的实际名称说明。

2. 在 Typography 调整字体

  • Font Family:字体类型,可选 Sans-serif、Serif、Monospace headings。
  • Base Size (px):正文字号,例如先用 16。
  • Line Height:行高倍率,例如先用 1.8。
  • Letter Spacing (em):字间距,初次调整可以从 0 开始。

这些值是一组起点,不是所有文章的最佳答案。右侧 Preview 会实时更新;观察连续两三段文字,确认读起来是否轻松。字体使用系统字体,实际显示也会受读者设备影响。

3. 在 Colors 和 Spacing 调整视觉

Colors 中的 Body Text 控制正文颜色,Headings 控制标题颜色,Accent 控制强调色。可以尝试正文 #374151、标题与强调色 #2563eb,让蓝色主要用于组织层次。

Spacing 中的 Paragraph (px)、Section (px)、Block Gap (px) 分别调整段落、章节与块元素相关的间距。先逐项调整,并观察正文、标题、引用和列表之间的距离,避免一次改很多参数而无法判断哪项产生影响。

4. 用自己的文章预览并保存

点击右侧 Preview with my own text,粘贴一小段具有标题、列表和引用的正文。需要恢复默认样例时点击 Use default sample。这段预览文本用于检查模板,不会替换排版工具的草稿。

新建或复制模板时,底部按钮是 Create;编辑已有自定义模板时是 Save。填写名称后点击对应按钮,保存完成会回到模板列表,新模板出现在「我的模板」中。离开前请先保存,未保存的模板调整不会自动成为自定义模板。

返回「公众号排版」,点击「一键排版」,点击新模板卡片选中它,再点击面板底部的「应用」。

示例:为周报设置一套清爽样式

编辑器区域字段可以尝试的值
TypographyBase Size (px)16
TypographyLine Height1.8
TypographyLetter Spacing (em)0
ColorsBody Text#374151
ColorsHeadings / Accent#2563eb
SpacingParagraph (px)18
markdown
# 一份更易读的周报

本周完成了文章结构整理,并试着统一正文的视觉样式。

## 已完成

- 统一标题层级
- 缩短过长的段落
- 为关键结论增加强调

> 先让内容清楚,再让样式统一。

## 下周计划

继续检查手机端的阅读体验,让字体、颜色和间距服务于内容。

用这段文字同时检查正文密度、标题识别度和引用距离。如果标题装饰过多,还可以在 Headings 中按 H1–H4 调整大小、字重及装饰选项。

预期效果

「我的模板」中出现新模板,排版工具中能够找到并应用它。应用之后文章内容不变,但正文颜色、行高与段落间距会改变;当前模板名称会显示在预览上方。

提示:自定义模板和草稿都只保存在当前浏览器。换浏览器或清理站点数据前,请记录重要参数,并另外保存文章原文。

常见问题

为什么在教程里导入示例后没有应用刚建的模板?

示例导入只替换 Markdown 正文,保留排版工具当前选中的模板。要使用新建模板,请在工具的「一键排版」面板中选择它。

为什么另一台设备找不到我的模板?

当前没有登录同步功能。模板来自这台设备的浏览器本地存储,不会自动同步到其他浏览器。

可以直接修改内置模板吗?

模板列表提供「复制并编辑」,保存后形成一份自定义模板。之后在「我的模板」里点击「编辑」继续修改即可。

相关工具

使用本文相关的工具继续实践。也可以导入本篇 Markdown 示例试一试。

打开公众号排版打开模板设计

替换现有草稿?

排版工具中已有内容。使用文章示例会替换当前草稿,请先确认原文已另行保存。取消后会保留现有草稿。

全部文章 →

广告