你好,
我试图通过 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;
}
有什么建议吗?
pfaffman
(Jay Pfaffman)
2
谢谢您的回复。
实际上,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
(Jay Pfaffman)
4
哦,我还以为那个方法已经过时了,现在有更好的方式。抱歉。
感谢回答 @pfaffman,希望有办法覆盖这些变量。否则,我将需要修改 CSS 类。
重新运行设置向导,自 2.6 测试版起,字体选择已成为设置向导中的一个步骤。
感谢回复 @codinghorror。这样的话,我们只能选择特定的字体,对吗?另外,我了解到这些变量无法被覆盖。是这样吗?
renato
(Renato Atilio)
8
@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;
}