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 的渲染字体大小异常大，与其他字体相比。这使得文本显得过大，与 UI 的其余部分不一致。

我尝试过的方法

• 测试多种 Nastaliq 字体：所有 Nastaliq 字体，即 Jameel、Mehr 和 Noto，都存在此问题。

• 与不同浏览器进行比较：（已在 Firefox/Edge 上测试）

• 验证 CSS 覆盖：字体已通过 @font-face 正确应用，并由 Discourse 加载。

预期 vs 实际

• 预期： 正确的 Nastaliq 连字和比例大小（见图像左侧）。

• 实际： 损坏的单词形状和过大的文本（见图像右侧）。

是否有人在 Chrome + Discourse 上遇到过 Noto Nastaliq Urdu 的此问题？这是 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]

@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 没有生效，还是 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;

这解决了两种字体的问题。