为什么 HTMLlang属性会更改字体连字，我该如何避免这种情况

发布于08月11日

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

在英文版上，正文有连字.在德文版本上，它不是这样的.如果我在德文版本上转到"判断元素"，并将lang属性更改为en，则会出现连字.

通过应用css规则font-variant-ligatures: none;，我可以将英文版本上的连字翻off.然而，在使用font-variant-ligatures: normal;的德语版本中将其转换为on不起作用(即使使用!important也不起作用).

我想要两种语言的on个连字.有谁知道我是如何做到这一点的，以及为什么它一开始会以如此奇怪的方式运行？

以下是我的字体相关的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个元素应用了来自TailwinCSS的类，请参阅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个

推荐答案