为什么 HTML \"lang\" 属性会更改字体连字，我该如何避免这种情况？答案

【问题标题】：Why does the HTML "lang" attribute change font ligatures and how can I avoid this?为什么 HTML \"lang\" 属性会更改字体连字，我该如何避免这种情况？
【发布时间】：2022-08-16 05:11:00
【问题描述】：

在我目前正在开发的网站上，我使用字体EB Garamond 来表示一些文本。这是一个多语言网站，带有一个语言切换器，可在\"en\" 和\"de\" 之间切换<html> 元素的lang 属性。

在英文版本中，文本有连字。在德语版本上，它没有。如果我转到德语版本的“检查元素”并将lang 属性更改为en，就会出现连字。

我可以转离开通过应用 CSS 规则 font-variant-ligatures: none; 在英文版上的连字。然而，转动它们上在带有font-variant-ligatures: normal; 的德语版本中不起作用（甚至对于!important 也不起作用）。

我想要连字上两种语言。有谁知道我如何实现这一点，以及为什么它首先表现得如此奇怪？

这是我与字体相关的 CSS 代码：

@font-face {
    font-family: garamond;
    src: url(../fonts/eb-garamond/EBGaramond-Regular.otf);
}

.garamond {
    font-family: garamond;
}

h1 {
    @apply text-4xl font-bold;
}

p {
    @apply mb-2;
}

.lead {
    @apply text-xl;
}

（仅供参考，@apply 的东西适用于 TailwindCSS 的类，请参阅 font size、font weight 和 margin，但这应该与问题无关）

和 HTML / Twig：

<div class=\"text-center garamond\">
    <h1>{{ \"SITE_TITLE\"|t|e }}</h1>
    <p class=\"lead\">{{ \"SITE_SUBTITLE\"|t|e }}</p>
</div>

这是英文版的样子： Screenshot English

还有德国人： Screenshot German

您是否在不同的浏览器/操作系统中尝试过？它发生在所有人身上吗？
根据georgduffner.at/ebgaramond/de/features.html，它是字体的“特征”，“[德语] 语言环境可以防止不受欢迎的连字，如 ffl、fb、fh 等。”。如果您需要某些元素的连字，您始终可以将它们的lang 属性设置为\"\"。
“因为它必须”？如果您指定lang=\"de\"，则文本与lang=\"en\" 相比应具有不同的连字，因为这些语言的书写方式不同.你为什么要绕过这一点，让德国读者觉得内容在客观上是错误的？ lang 属性告诉浏览器应该应用什么本地化（如果有的话），并且“确保书面文本遵循该语言环境的书面文本规则”是最重要的之一。
嗯。我没有意识到这些连字在德语中被认为是“不受欢迎的”。德语是我的母语，在我看来，这个版本没有ligatures 实际上是看起来错误的那个。感谢您指出这一点，但我仍然会寻求一些解决方法，因为这个特定的文本更像是一个设计元素，应该在不同语言之间看起来一致。
FWIW：fi 连字对我来说绝对没有错，而且我也是德国（实际上是奥地利）的读者。喜欢与否，这只是一个品味问题。

标签： html css fonts multilingual

【解决方案1】：

解决方法：lang 属性可用于单个标签，例如，在单个单词或短语周围使用 <span lang="en"> 标签完成，以便在屏幕阅读器阅读时获得德语文本中英语单词的正确发音。

因此，如果您只需要在页面中的某个 h1 上使用它，您可以像这样使用它...

<h1 lang="en">schachingerfilm</h1>

...并且在您的bodytag 中仍然有lang="de" 或相应的变量。

（我想在这种情况下正确的屏幕阅读器发音对你来说并不重要...... ;-)

【讨论】：

“schachingerfilm”是英文单词吗？如果不是请不要将lang 设置为"en"，使用未知值禁用它（""）
@Kaiido“schachingerfilm”是公司名称。所以这并不重要。
确实如此。如果不是特定语言，请使用未知。为什么屏幕阅读器应该使用英语语音来阅读这个？

【解决方案2】：

f-连字在德语排版中通常是不可取的，因为它们通常出现在复合词中，如佛罗里达州在奥弗拉根或者脸书在劳夫班.一些排版师在英语中也遵循相同的规则，有些排版员更进一步避免将两个连字连接起来音节一起。

EB Garamond 是由一位讲德语的字体设计师设计的，他包含本地化功能，因此在标记为德语的文本中完全禁用 f 连字。如果要手动将连字应用于德语文本，请不要将 lang= 属性更改为 "en" 或 ""。您可以简单地关闭 OpenType locl 功能，如下所示：

<h1 lang="de"><span class="de-liga">schachingerfilm</span> kamera und postproduktion</h1>

.de-liga {
  font-feature-settings: 'locl' 0;
}

这将有效地将liga OpenType 功能应用于菲在夏欣格电影因为locl 功能不再阻止它。

【讨论】：