Discourseのフォントレンダリング

[kcahtoor]

こんにちは。

Discourseで、カスタムのウルドゥー語フォントであるJameel Noori Nastaliq（Noto Nastaliq Urduのバリアント）を使用している際に、フォントレンダリングの問題が発生しています。私の環境は以下の通りです。

• ブラウザ: Chrome バージョン 138.0.7204.183

• フォント: Jameel Noori Nastaliq

• プラットフォーム: Discourse（こちらに従ってテーマコンポーネントを使用しています）

問題

Jameel Noori NastaliqをDiscourseに適用すると、テキストが期待通りにレンダリングされません。

• 一部の単語の形状が正しくありません。添付の画像では、右側のテキストが現在のDiscourseのレンダリングを示しており、左側は同じフォントとブラウザを使用した期待されるレンダリングを示しています。

• 他のウルドゥー語フォント（Nastaliq以外）は、同じ環境で正しく表示されます。

• さらに、Noto Nastaliq Urduは、他のフォントと比較して異常に大きなフォントサイズでレンダリングされます。これにより、テキストが大きすぎに見え、UIの他の部分との一貫性がなくなります。

試したこと

• 複数のNastaliqフォントのテスト：すべてのNastaliqフォント（Jameel、Mehr、Noto）でこの問題が発生しています。

• 異なるブラウザでの比較：（Firefox/Edgeでテスト済み）

• CSSオーバーライドの確認：フォントは@font-faceを介して正しく適用され、Discourseによってロードされています。

期待される結果 vs 実際の結果

• 期待される結果: 正しいNastaliq合字と比例したサイズ（画像の左側を参照）。

• 実際の結果: 単語の形状が崩れ、テキストが大きすぎる（画像の右側を参照）。

Chrome + DiscourseでNoto Nastaliq Urduを使用している同様の問題に遭遇した方はいらっしゃいますか？これはChromeのシェーピングバグ、フォントの問題、あるいはDiscourseがカスタムフォントを処理する方法に起因するものなのでしょうか？

何かご guidance があれば、事前に感謝いたします。

[nat (Natalie T)]

Discourse がフォントの太さに関して何らかの処理を行っている可能性があります。

CSS についてご存知ですか？テーマコンポーネントで Styling Discourse with variables: Show & Tell で定義されているフォントの太さの変数を調整できるかもしれません。

[chapoi]

はい、主に太字が歪みの原因になっていると思います。
グローバルオーバーライドですべての太字フォントをオフにするか、使用しているフォントに特定の太字バリアントがあることを確認してください。

こちらの方がうまくいくかもしれないと読みました：Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

返信ありがとうございます。太字フォントをオフにします。どのように行うのが最も簡単だと思いますか？

[chapoi]

@kcahtoor

太字フォントをオフにするつもりですが、どのように行うのが最も簡単だと思いますか？

徹底を期すために、これをカスタムCSSに追加すると機能するはずです。

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi 残念ながら、これは機能していません。どう思いますか？

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

これら3つはこれらの単語に共通しています

[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;

これにより、両方のフォントの問題が解決しました。