Discourse如何自定义字体？

IT技术分享
1

image
image1707×480 29.3 KB

步骤 1：创建 / 打开主题组件

  1. 登录 Discourse 后台，进入 外观 > 组件 > 安装 > 新建，输入组件名称（如 “Georgia 字体设置”），类型选 “component”，点击创建。
  2. 若已有自定义主题组件，直接进入该组件的编辑页面即可。

步骤 2：编写 CSS 应用字体

在组件编辑页面，切换到 Common > CSS 标签，根据需求选择以下代码（二选一，或按需调整）：

方式 1：全局应用（整个论坛文字都用该字体）

css

/* 全局基础字体 */
body {
  font-family: "Georgia", "Times New Roman", serif !important;
}
/* 补充：确保帖子内容、标题等关键区域生效 */
.topic-title, .topic-post .cooked, .post-body, h1, h2, h3, p, span, div {
  font-family: "Georgia", "Times New Roman", serif !important;
}

方式 2：仅针对帖子内容生效（不修改全局界面）

若只想让用户发布的帖子内容用该字体，保留论坛界面默认字体，用以下代码：

css

/* 仅帖子正文内容 */
.topic-post .cooked {
  font-family: "Georgia", "Times New Roman", serif !important;
}
/* 补充：帖子标题可选 */
.topic-title {
  font-family: "Georgia", "Times New Roman", serif !important;
}

步骤 3：启用组件并验证

  1. 点击页面底部的 保存 按钮，然后回到 外观 > 组件 页面。
  2. 找到你创建的 “Georgia 字体设置” 组件，点击右侧的 添加到主题，选择论坛正在使用的主主题（如 “Default”）。
  3. 刷新论坛前端页面，查看字体是否生效：
  • 可通过浏览器「右键 > 检查」，选中文字元素，在「样式」面板查看 font-family 是否为设置的值。
  • 若未生效，检查 CSS 中是否加了 !important（覆盖 Discourse 原生样式），或清除浏览器缓存重试。

补充说明

  • Georgia 和 Times New Roman 是系统自带的衬线字体，无需额外引入 / 上传，所有设备（Windows/Mac/ 移动端）都兼容。
  • 若想调整字体大小、行高，可在 CSS 中补充：

css

/* 示例：调整帖子内容字体大小和行高 */
.topic-post .cooked {
  font-family: "Georgia", "Times New Roman", serif !important;
  font-size: 16px; /* 字体大小 */
  line-height: 1.6; /* 行高，提升可读性 */
}
  • 若后续想恢复默认字体，只需禁用该主题组件即可，无需修改代码。