字体连字是OpenType字体中把相邻字符组合成单一字形以提升排版质感的特性。CSS通过font-variant-ligatures属性让开发者主动控制连字行为，避免默认渲染带来的不一致问题。
font-variant-ligatures基本取值
该属性常用值包括以下几个，它们可以直接作用于任意文本容器：
- normal：启用字体默认连字，通常由字体文件决定。
- none：完全关闭所有类型的连字。
- common-ligatures：开启如fi、fl这类常见连字。
- no-common-ligatures：关闭常见连字。
- discretionary-ligatures：开启字体中的自由连字。
- historical-ligatures：开启历史连字。
如何使用该属性优化连字
如果希望页面正文使用常见连字但关闭自由连字，可如下设置：
body {
font-variant-ligatures: common-ligatures no-discretionary-ligatures;
}
在表单输入框中，有时连字会造成编辑错位的错觉，可直接关闭：
input, textarea {
font-variant-ligatures: none;
}
与font-feature-settings的配合
部分旧版浏览器不支持font-variant-ligatures，可用font-feature-settings兜底：
.heading {
font-feature-settings: "liga" 1, "dlig" 0;
font-variant-ligatures: common-ligatures no-discretionary-ligatures;
}
不同场景的建议
| 场景 | 推荐设置 |
|---|---|
| 长文阅读 | common-ligatures |
| 代码编辑区 | none |
| 艺术标题 | discretionary-ligatures |
注意事项
连字效果依赖字体本身是否包含对应字形，使用系统默认字体时需测试多平台表现。通过合理设置<code>font-variant-ligatures</code>，可以在视觉与可用性之间取得平衡。
CSSfont-variant-ligatures字体连字修改时间：2026-07-30 07:36:15