更改您网站的默认字体

[Discourse]

本指南说明了如何在您的 Discourse 站点上更改默认字体，可以针对特定元素进行更改，也可以使用 Google Fonts 以外的字体库。

所需用户级别：管理员

仅当您想集成除 Google Fonts 以外的字体库或仅更改站点某些元素的字体时，才需要本指南。如果您正在使用 Google Fonts 并且想在整个站点中全局更改字体，请尝试使用此主题组件：Google Fonts。

本指南将涵盖：

• 使用内置字体设置
• 使用自定义字体更改站点字体
• 将不同字体应用于特定元素

内置字体设置

Discourse 包含一个内置的字体选择器，其中包含一系列捆绑的字体。这是在不使用任何自定义 CSS 的情况下更改站点字体的最简单方法。

导航至 Admin (管理员) > Appearance (外观) > Fonts (字体) 以访问字体设置页面。您可以在此处设置：

• Base font (基础字体) — 用于站点上的大部分文本（默认：Inter）
• Heading font (标题字体) — 用于标题（默认：Inter）
• Default text size (默认文本大小) — 所有用户的默认文本大小

这些设置在底层使用 --font-family 和 --heading-font-family CSS 自定义属性，主题也可以覆盖这些属性。

使用自定义字体更改字体

如果您想使用内置列表中不包含的字体（例如来自 Google Fonts 或自托管的字体文件），可以通过主题组件来实现。

1. 创建一个新的主题组件

   导航至 Admin (管理员) > Appearance (外观) > Themes & Components (主题和组件) > Install (安装) > Create New (新建)。选择一个名称并选择“Component (组件)”。

2. 编辑 CSS/HTML

   点击“Edit CSS/HTML (编辑 CSS/HTML)”按钮。

   

3. 使用 Google Fonts 添加字体

   如果您想使用 Google Web 字体，请将以下内容添加到您的 Common (通用) > CSS 选项卡中：

   @import url(https://fonts.googleapis.com/css?family=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-font-family: 'Oswald', sans-serif;
   }
   

   确保将 @import url 语句放置在样式表的顶部。

   在此示例中，Oswald 是字体的名称。

   如果 @import url 方法有问题，您可以选择使用 <link> 方法，将适当的行插入到主题组件的 Common (通用) > /head 选项卡中：

   <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
   

   此方法将全局更改站点字体。

4. 将字体应用于特定元素
   您也可以仅将站点字体更改为某些元素。

   要仅更改某些元素的字体，例如导航栏或主题标题，请添加：

   @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
   
   .navigation-container, .link-top-line {
       font-family: 'Oswald', sans-serif;
   }
   

   

   或者，要更改特定类别的字体，请使用：

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. 将新组件添加到主主题

   确保将新创建的主题组件添加到用户可以选择的所有主主题中：