Отрисовка шрифтов в Discourse

[kcahtoor]

Здравствуйте,

У меня возникла проблема с отображением шрифта при использовании кастомного урду-шрифта, а именно Jameel Noori Nastaliq (вариант Noto Nastaliq Urdu) в Discourse. Моя конфигурация:

• Браузер: Chrome Версия 138.0.7204.183

• Шрифт: Jameel Noori Nastaliq

• Платформа: Discourse (использую компонент темы согласно этой инструкции)

Проблема

При применении шрифта Jameel Noori Nastaliq в Discourse текст отображается некорректно:

• Отдельные слова формируются неправильно. На приложенном изображении текст справа показывает текущий способ отображения в Discourse, тогда как слева показано ожидаемое отображение (с использованием того же шрифта и браузера).

• Другие шрифты урду (не Nastaliq) отображаются корректно в той же среде.

• Кроме того, шрифт Noto Nastaliq Urdu отображается с необычно большим размером шрифта по сравнению с другими шрифтами. Из-за этого текст выглядит слишком крупным и не согласуется с остальным интерфейсом.

Что я пробовал

• Тестирование нескольких шрифтов Nastaliq: у всех шрифтов Nastaliq (Jameel, Mehr и Noto) наблюдается эта проблема.

• Сравнение с другими браузерами: (тестировалось в Firefox/Edge)

• Проверка переопределений CSS: шрифт корректно применяется через @font-face и загружается Discourse.

Ожидаемое против фактического

• Ожидаемое: Корректные лигатуры Nastaliq и пропорциональное масштабирование (см. левую часть изображения).

• Фактическое: Нарушенное формирование слов и чрезмерно крупный текст (см. правую часть изображения).

Сталкивался ли кто-нибудь ещё с этой проблемой при использовании Noto Nastaliq Urdu в связке Chrome + Discourse? Является ли это ошибкой формирования текста в Chrome, проблемой самого шрифта или чем-то связанным с тем, как Discourse обрабатывает кастомные шрифты?

Заранее спасибо за любые рекомендации.

[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 Спасибо за ответ. Я продолжу и отключу жирный шрифт. Как вы думаете, что будет проще сделать?

[chapoi]

@kcahtoor

Я продолжу и отключу жирный шрифт. Как вы думаете, что будет проще сделать?

Хм, чтобы быть максимально точным, добавление этого в ваш пользовательский CSS должно сработать:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi К сожалению, это не работает. Как насчёт

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

Эти три свойства обычно используются для таких слов.

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

Проблема вызвана настройками шрифтов CSS по умолчанию в Discourse, которые мешают корректному отображению сложных скриптов:

// Проблематичные настройки по умолчанию
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

// Решение — переопределить
font-variant-ligatures: normal;
font-feature-settings: normal;

Это решило проблему для обоих шрифтов.