Discourse 글꼴 렌더링

[kcahtoor]

안녕하세요,

Discourse에서 Jameel Noori Nastaliq( Noto Nastaliq Urdu의 변형)라는 사용자 지정 우르두 폰트를 사용하면서 폰트 렌더링 문제를 겪고 있습니다. 제 환경은 다음과 같습니다:

• 브라우저: Chrome Version 138.0.7204.183

• 폰트: Jameel Noori Nastaliq

• 플랫폼: Discourse(이 가이드에 따라 테마 컴포넌트를 사용 중입니다)

문제점

Discourse에 Jameel Noori Nastaliq를 적용하면 텍스트가 예상대로 렌더링되지 않습니다:

• 일부 단어의 형태가 잘못 표시됩니다. 첨부된 이미지에서 오른쪽은 Discourse가 현재 렌더링하는 모습이고, 왼쪽은 동일한 폰트와 브라우저를 사용할 때의 예상 렌더링 결과입니다.

• 다른 우르두 폰트(Non-Nastaliq)는 동일한 환경에서 정상적으로 표시됩니다.

• 또한, Noto Nastaliq Urdu는 다른 폰트와 비교했을 때 비정상적으로 큰 글꼴 크기로 렌더링됩니다. 이로 인해 텍스트가 과도하게 커 보이며 나머지 UI와 일관성이 없습니다.

시도해 본 방법

• 여러 Nastaliq 폰트 테스트: Jameel, Mehr, Noto 등 모든 Nastaliq 폰트에서 이 문제가 발생합니다.

• 다른 브라우저와 비교: (Firefox/Edge에서 테스트)

• CSS 오버라이드 확인: 폰트는 @font-face를 통해 올바르게 적용되고 있으며 Discourse에 의해 로드됩니다.

예상 vs 실제

• 예상: 올바른 Nastaliq 리가처(연결 문자)와 비율에 맞는 크기(이미지 왼쪽 참조).

• 실제: 깨진 단어 형태와 과도하게 큰 텍스트(이미지 오른쪽 참조).

Noto Nastaliq Urdu를 Chrome + Discourse 환경에서 사용하면서 이 문제를 경험하신 분이 계신가요? 이것이 Chrome의 shaping 버그인지, 폰트 자체의 문제인지, 아니면 Discourse가 사용자 지정 폰트를 처리하는 방식에 있는 문제인지 궁금합니다.

도움 주시면 감사하겠습니다.

[nat (Natalie T)]

Discourse가 글꼴 가중치와 관련하여 글꼴에 어떤 작업을 수행하고 있을 가능성이 있습니다.

css에 익숙한가요? Styling Discourse with variables: Show & Tell 에서 정의된 글꼴 가중치 변수 중 일부를 테마 컴포넌트에서 조정할 수 있습니다.

[chapoi]

네, 굵은 글꼴(bolding) 때문에 왜곡이 생기는 것 같습니다.
전체적으로 굵은 글꼴을 끄거나, 사용하는 글꼴에 특정 굵은 글꼴 변형(bold variant)이 있는지 확인해 보세요.

이 글꼴이 더 잘 작동할 수 있다는 글을 읽었습니다: Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

@chapoi 답변 감사합니다. 이제 굵은 글씨를 끄러 가겠습니다. 어떻게 하면 더 쉽게 할 수 있을까요?

[chapoi]

@kcahtoor

다음으로 볼드 폰트를 끄려고 합니다. 어떻게 하면 더 쉽게 할 수 있을까요?

음, 매우 철저하게 하려면 사용자 지정 CSS에 다음을 추가하면 작동할 것입니다:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi Unfortunately this is not working. What do you think about

overflow-wrap: break-word;
white-space: nowrap;
 text-overflow: ellipsis;

These three are common to these words

[chapoi]

그것들은 당신의 폰트에 아무런 영향을 주지 않을 것입니다.

저는 제 해결책을 로컬에서 시도해 봤고, 그 방법으로 문제가 해결되는 것 같았습니다. CSS가 적용되지 않는다는 말씀이신가요, 아니면 적용은 되지만 문제가 해결되지 않는다는 말씀이신가요?

[kcahtoor]

@chapoi 감사합니다. 말씀드리고 싶은 것은 CSS 규칙은 적용되고 있지만, 원하는 효과가 나타나지 않는다는 것입니다. 제가 겪고 있는 문제를 재현할 수 있도록 아래 링크를 공유합니다.

/* Jameel Noori Nastaliq v4 */
@font-face {
  font-family: "Jameel-Noori";
  src: url("https://cdn.jsdelivr.net/npm/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2"),
  url("https://unpkg.com/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2");
}

이 특정 변형은 이러한 겹치는 글자 문제를 일으키며, 아래에 있는 것과 같은 원하는 효과와 매우 거리가 멉니다.

/* Mehr Nastaliq Web Font v2 */
@font-face {
  font-family: "Mehr";
  src: url("https://cdn.jsdelivr.net/npm/mehr-nastaliq/fonts/mehr.woff2") format("woff2")
}

[kcahtoor]

이 문제는 Discourse의 기본 CSS 글꼴 기능 설정이 복잡한 문자열 렌더링에 간섭을 일으키기 때문에 발생합니다:

css

//문제가 되는 기본 설정
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

//해결 방법은 오버라이드입니다
 font-variant-ligatures: normal;
 font-feature-settings: normal;

이 방법으로 두 글꼴 모두에서 문제를 해결했습니다.