Discourseの変数をオーバーライドすることは可能ですか？

サポート
1

こんにちは、

フォントファミリー、フォントウェイト、フォントサイズなどのタイポグラフィを Discourse の変数で変更しようとしています。

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

この場合、$heading-font-family: Arial; のように $heading-font-family 変数を変更するにはどうすればよいでしょうか？いくつかの方法を試しましたが、変更が反映されません。

$heading-font-family: Arial;

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

ご教示いただけますでしょうか？

「いいね！」 1
2

https://meta.discourse.org/t/selectable-font-family-component/117493? をご覧になることをお勧めします。

「いいね！」 4
3

返信ありがとうございます。

実は、それには Discourse の標準機能があります。しかし、より詳細なタイポグラフィのカスタマイズを行いたいと考えています。

image
image1480×436 20.6 KB

そのため、変数の値を変更する方法を探しています。これにより、タイポグラフィ全体を簡単に変更できるかと考えました。

variables.scss から抜粋

// Fonts
// --------------------------------------------------

$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-size defintions, multiplier ^ (step / interval)
$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;

これらの変数を変更することは可能だと思いますか？

「いいね！」 2
4

ああ、それは古く感じましたし、もっと良い方法があるかと思いました。すみません。

「いいね！」 2
5

@pfaffman 回答ありがとうございます。これらの変数をオーバーライドする方法が何かあればよいのですが。なければ、CSS クラスを変更する必要があります。

「いいね！」 1
6

セットアップウィザードを再実行してください。2.6 ベータ版以降、フォント選択がセットアップウィザードのステップとして追加されました。

「いいね！」 4
7

返信ありがとうございます、@codinghorror。つまり、特定のフォントのみを選択できるということですね？また、これらの変数は上書きできないと学びましたが、合っていますか？

8

@bekircem 2.7.0.beta1でウィザードをテストしたところ、上記のサイト設定で示された利用可能なフォントは同じでした（何か見落としている可能性はあります）。

おそらくもうお気づきかと思いますが、念のため、Google Fonts を使用するか、あなたの最初の投稿で行ったようにCSS変数を置き換えることができます。これで動作するはずです。

私のインスタンスでは以下のCSSを使用しており、問題なく動作しています（フォントを <link/> または @include で読み込んでいます）。

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}
「いいね！」 2