font-variant-ligatures 不起作用的主因是字体本身未包含连字形；需确认字体支持（如 georgia、ibm plex serif）、检查 font-feature-settings 是否被覆盖、在 @font-face 中显式声明，并注意浏览器兼容性差异。
font-variant-ligatures 不起作用？先确认字体本身支持连字
很多同学一加 font-variant-ligatures: common-ligatures; 就以为能立刻看到 fi、fl 变成连字，结果没变化——大概率是当前字体压根没打包这些连字形（glyph）。Open Sans、Roboto 这类免费无衬线体默认不带连字表；而 Georgia、Hoefler Text、Adobe Garamond Pro 或开源的 IBM Plex Serif 才更可能包含。
实操建议：
- 用浏览器开发者工具的“Computed”面板查
font-feature-settings是否被覆盖（比如某 CSS 框架重置了它） - 在
@font-face中显式声明font-feature-settings: "liga";（部分旧版 Safari 要求这个） - 临时换字体验证：给元素加
font-family: "Segoe UI", "Helvetica Neue", serif;，Windows 下Segoe UI对常见连字支持较稳
common-ligatures 和 discretionary-ligatures 的实际差异
common-ligatures 开启的是排版中“必须存在”的基础连字，比如 fi、fl、ff，几乎所有支持连字的字体都提供；而 discretionary-ligatures 是装饰性连字，像 ct、st、Th，是否渲染完全取决于字体设计者有没有做、以及用户是否主动启用。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 设了
discretionary-ligatures却看不到效果 → 字体没定义这些形，不是 CSS 写错了 - 在代码编辑器或等宽字体里强行开连字 →
font-variant-ligatures对monospace基本无效，连字会破坏字符对齐 - 用
font-feature-settings: "liga" on, "dlig" on;覆盖时，忘了加引号或写错 tag（"liga"≠"liga "）
Firefox / Safari 下 ligatures 渲染不一致的根源
Firefox 从 69+ 开始默认启用 common-ligatures，但只对 font-family 显式指定的字体生效；Safari（尤其是 iOS）则依赖系统字体栈和 WebKit 的渲染路径，对自定义字体的 font-variant-ligatures 支持更保守。
关键兼容性影响：
- Safari 需要同时设置
font-variant-ligatures: common-ligatures;和font-feature-settings: "liga" 1;才更可靠 - 某些字体文件（如 woff2）若未在生成时开启
liga特性，即使 CSS 写对也白搭 - Chrome 90+ 对
font-variant-ligatures的继承行为有小变更：父元素设了none，子元素设common-ligatures可能被忽略，得显式重置
连字开启后文字宽度突变，怎么稳定布局？
连字本质是把两个字符替换成一个新字形，宽度通常略小于原字符之和。如果容器是固定宽、且内容靠右/居中，连字一开，整行文字就往左偏移几像素——视觉上像“抖动”。这不是 bug，是字体度量（metrics）的正常表现。
应对方式很实际：
- 避免对含文本的
inline元素设固定width或text-align: right后再开连字 - 用
font-variant-ligatures: no-common-ligatures;局部关闭（比如数字序列、代码片段） - 真要精确控制，改用
font-feature-settings: "liga" 0;关闭，比no-common-ligatures兼容性稍好
连字不是开关式功能，它卡在字体文件、浏览器引擎、CSS 解析三层之间，少一个环节对不上，就只是个没反应的属性。调的时候别只盯着 CSS，先打开字体文件看看它到底有没有“货”。
