Discourse 변수를 오버라이드하는 것이 가능한가요?

지원
1

안녕하세요,

Discourse 변수를 사용하여 font-family, font-weight 및 font size와 같은 타이포그래피를 변경하려고 합니다.

$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;
}

아는 분이 계신가요?

2

https://meta.discourse.org/t/selectable-font-family-component/117493? 를 한번 살펴보세요.

3

답변해 주셔서 감사합니다.

사실 그 기능을 위한 기본 Discourse 기능이 이미 존재합니다. 하지만 더 상세한 타이포그래피 커스터마이징을 원합니다.

image
image1480×436 20.6 KB

따라서 변수의 값을 변경하는 방법을 찾고 있습니다. 그러면 전체 타이포그래피를 쉽게 변경할 수 있을 것이라 생각했습니다.

variables.scss 파일에서

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

$base-font-size-smallest: 0.815em !default; // eq. to 13px
$base-font-size-smaller: 0.875em !default; // eq. to 14px
$base-font-size: 0.938em !default; // eq. to 15px
$base-font-size-larger: 1.063em !default; // eq. to 17px
$base-font-size-largest: 1.118em !default; // eq. to 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; // Smallest size we use based on the 1em base
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

이 변수들을 변경하는 것이 가능한지 생각하시나요?

4

아, 그게 좀 오래된 방식인 줄 알고 이제 더 나은 방법이 있는 줄 알았어요. 죄송합니다.

5

@pfaffman 답변해 주셔서 감사합니다. 이 변수들을 오버라이드할 수 있는 방법이 있기를 바랍니다. 그렇지 않으면 CSS 클래스를 변경해야 할 것 같습니다.

6

2.6 베타 버전부터 설정 마법사의 한 단계로 추가된 글꼴 선택을 위해 설정 마법사를 다시 실행하세요.

7

@codinghorror 님, 답변 감사합니다. 그러면 특정 폰트만 선택할 수 있는 건가요? 그리고 이 변수들은 오버라이드할 수 없다고 들었습니다. 맞나요?

8

@bekircem 방금 2.7.0.beta1에서 마법사(wizard)를 테스트해 보았는데, 사용 가능한 폰트는 위에서 공유해 주신 사이트 설정의 폰트와 동일합니다(무언가를 놓치고 있을 수도 있습니다).

이미 해결하셨을 가능성이 높지만, 혹시 모르니 Google Fonts 을 사용하시거나, 처음 올린 글(OP)에서 하셨듯이 CSS 변수를 직접 교체하는 방법을 사용하실 수 있습니다. 이 방법은 작동했을 것입니다.

저는 제 인스턴스에서 아래 CSS를 사용하고 있으며, 정상적으로 작동합니다(폰트를 <link/> 또는 @include로 로드하는 경우).

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