font-variant-ligatures生效的前提是字体本身包含对应连字字形，如roboto、open sans默认不支持，而georgia、ibm plex serif等才内置liga表；common-ligatures对应基础连字（fi/fl），discretionary-ligatures对应装饰性连字（ct/st），需字体明确实现；safari需同时声明font-variant-ligatures和font-feature-settings才稳定，失效时应优先通过devtools fonts面板验证字体opentype特性是否启用。
font-variant-ligatures 不是“写了就出效果”的开关，它只向浏览器传达启用意图，最终是否渲染连字，取决于字体本身是否打包了对应字形。常见错误是加了 common-ligatures 却没变化——大概率是字体不支持。
为什么设置了 font-variant-ligatures: common-ligatures 却没反应
根本原因不是 CSS 写错了，而是字体文件里压根没有 liga 表（OpenType 连字特性表）。比如：
-
Roboto、Open Sans默认 Web 版本不含连字，写了也白写 -
Georgia、IBM Plex Serif、Source Serif Pro完整版才明确带liga和dlig - 用
@font-face加载自定义字体时，若生成时没开启liga特性（如用 fonttools subset 未保留），CSS 再对也无效
验证方法：Chrome DevTools → Elements → Computed → 找 font-feature-settings，看值是否被解析（灰掉=无效）；再点 Fonts 面板，展开当前字体，查 “OpenType Features” 列表里 liga 是否勾选。
common-ligatures 和 discretionary-ligatures 的实际区别
这不是语义强弱的区别，而是 OpenType 规范中两类独立特性：
-
common-ligatures对应"liga" 1，控制fi、fl、ff等基础连字，多数西文字体只要支持连字，必含这一项 -
discretionary-ligatures对应"dlig" 1，控制ct、st、Th等装饰性连字，完全由字体设计师决定做不做，很多免费字体直接没实现 - 设了
discretionary-ligatures却没效果？先别调 CSS，去 FontDrop.io 上传字体文件，直接看它的 OpenType 特性列表有没有dlig
Safari 和 Firefox 下连字不一致的硬伤怎么绕
WebKit（Safari/iOS）对 font-variant-ligatures 的支持更保守，尤其对自定义字体：
- Safari 常需同时写两行才稳：
font-variant-ligatures: common-ligatures;+font-feature-settings: "liga" 1; - Firefox 69+ 默认启用
common-ligatures，但仅对font-family显式声明的字体生效；若父元素用了系统字体栈（如"Segoe UI", sans-serif），可能被跳过 - Chrome 90+ 有继承变更：父元素设了
none，子元素单设common-ligatures可能被忽略，得显式重置为common-ligatures或用unset
连字一开，文字宽度突变导致布局错乱怎么办
连字本质是把多个字符替换成一个新字形，宽度必然变化。这在响应式排版或等宽容器里特别明显：
- 不要在
monospace字体上开连字：font-variant-ligatures对等宽字体基本无效，强行开反而破坏对齐 - 避免在需要像素级控制的场景（如按钮内联文本、表格单元格）无差别启用
discretionary-ligatures - 若必须用，优先测试真实内容（比如含
fi、fl、ct的词），而不仅是“abc”这种占位符 - 连字导致换行异常？配合
text-rendering: optimizeLegibility;（仅作提示，不解决根本问题）
最常被忽略的一点：连字是否生效，永远取决于字体文件本身，而不是你写了多少遍 common-ligatures。检查字体支持比调试 CSS 优先级更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
