是否可以覆盖 Discourse 变量?

你好,

我试图通过 Discourse 变量来修改排版,例如字体族(font-family)、字重(font-weight)和字体大小。

$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

那么,我该如何修改 heading-font-family 变量,例如 $heading-font-family: Arial;?我尝试了几种方法,但更改并未生效。

$heading-font-family: Arial;

:root {
  --heading-font-family: Arial;
}

有什么建议吗?

不妨看看这个:https://meta.discourse.org/t/selectable-font-family-component/117493?

谢谢您的回复。

实际上,Discourse 本身就有默认功能可以实现这一点。但我希望进行更详细的排版定制。

因此,我正在寻找一种方法来修改变量的值。我本以为这样可以轻松调整整个排版风格。

来自 variables.scss 文件:

// 字体
// --------------------------------------------------

$base-font-size-smallest: 0.815em !default; // 相当于 13px
$base-font-size-smaller: 0.875em !default; // 相当于 14px
$base-font-size: 0.938em !default; // 相当于 15px
$base-font-size-larger: 1.063em !default; // 相当于 17px
$base-font-size-largest: 1.118em !default; // 相当于 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// 字体大小定义,倍数 ^ (步长 / 间隔)
$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
$font-up-3: 1.5157em;
$font-up-2: 1.3195em;
$font-up-1: 1.1487em; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // 基于 1em 基准使用的最小尺寸
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

您认为可以修改这些变量吗?

哦,我还以为那个方法已经过时了,现在有更好的方式。抱歉。

感谢回答 @pfaffman,希望有办法覆盖这些变量。否则,我将需要修改 CSS 类。

重新运行设置向导,自 2.6 测试版起,字体选择已成为设置向导中的一个步骤。

感谢回复 @codinghorror。这样的话,我们只能选择特定的字体,对吗?另外,我了解到这些变量无法被覆盖。是这样吗?

@bekircem 我刚刚在 2.7.0.beta1 上测试了向导,可用的字体与你在上面发布的站点设置中列出的相同(我可能遗漏了什么)。

你可能已经解决了,但以防万一,你可以使用 https://meta.discourse.org/t/google-fonts-theme-component/143720,或者像你在原帖中做的那样替换 CSS 变量——这本来应该能生效。

我在我的实例中使用了以下 CSS,并且它正常工作(通过 <link/>@include 加载字体):

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}