HTML lang属性为何影响字体连字？如何实现双语均显示连字？

问题说明 #

开发多语言网站时，使用EB Garamond字体展示部分文本，通过切换<html>元素的lang属性在en（英文）和de（德文）间切换语言。出现以下现象：

• 英文版本文本带有字体连字，德文版本无连字；
• 在德文版本的开发者工具中将lang属性改为en后，连字会立即出现；
• 可通过font-variant-ligatures: none;关闭英文版本的连字，但使用font-variant-ligatures: normal;（添加!important也无效）无法开启德文版本的连字。

需求：实现双语版本均显示字体连字。

原因分析 #

浏览器会根据<html>的lang属性自动适配字体排版特性，EB Garamond这类专业西文字体针对不同语言有预设的排版规则：

• 英文排版默认启用常见连字（如fi、fl等）；
• 德文排版习惯中部分连字使用率极低，浏览器或字体本身会针对lang="de"自动禁用连字特性；
• font-variant-ligatures: normal;表示遵循浏览器默认的语言相关排版规则，因此无法覆盖德文环境下的连字禁用逻辑。

解决方法 #

显式强制开启连字特性，不要使用normal值，而是直接指定需要启用的连字类型，覆盖浏览器的语言默认规则。

修改.garamond类的CSS规则，添加显式的连字设置：

.garamond {
    font-family: garamond;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

• common-ligatures启用通用连字（如fi、fl）；
• discretionary-ligatures启用可选连字（字体设计中包含的额外连字样式）；
• 若需要更全面的连字支持，可使用all值（font-variant-ligatures: all;），但需注意部分字体可能没有过多可选连字。

相关代码 #

字体引入CSS #

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

基础样式CSS #

.garamond {
    font-family: garamond;
    font-variant-ligatures: common-ligatures discretionary-ligatures; /* 新增的连字强制开启规则 */
}

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

p {
    @apply mb-2;
}

.lead {
    @apply text-xl;
}

（注：@apply用于引入TailwindCSS类，仅涉及字号、字重、外边距，与连字问题无关）

HTML/Twig代码 #

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

内容的提问来源于stack exchange，提问作者user17477928