font-feature-settings: "liga" 1没反应,主因是字体不支持、未加载完整版或声明非法;必须三者同时满足:字体含liga表、加载含该表的woff2文件、css写法为引号+1/0。

写了 font-feature-settings: "liga" 1 却没连字?不是 CSS 写错了,而是字体没带、没加载对、或浏览器还没重绘。
为什么 font-feature-settings: "liga" 1 没反应
连字是否出现,和编辑器无关,只取决于三件事是否同时成立:字体文件里真有 liga 表、@font-face 加载的是含该表的版本、CSS 声明被浏览器正确解析。常见断点:
- Google Fonts 上默认引入的
Roboto、Inter、Open Sans都不含liga,写了也静默忽略 - 用
font-display: swap时,首屏先用系统字体渲染,Web 字体加载完才重绘——你看到的“没变化”,其实是时机问题 -
font-feature-settings: liga 1(缺引号)或"liga" on(非标准值)在 Chrome DevTools → Computed 面板里会显示为 strike-through 灰字,代表声明无效
怎么写才合法且生效
语法必须严格:字符串加引号,数值用 1 或 0,多个特性用逗号分隔。不要依赖 on/off 别名,尤其 Safari 对 on 解析不稳定。
- ✅ 正确:
font-feature-settings: "liga" 1 - ✅ 正确:
font-feature-settings: "liga" 1, "dlig" 1, "clig" 1 - ⚠️ 风险:
font-feature-settings: "liga" on—— 多数浏览器认,但 MDN 明确标注为非标准 - ❌ 无效:
font-feature-settings: liga 1(缺引号)、"liga" true(布尔值不被接受)
怎么验证连字真启用了
别靠眼睛扫段落,用 Chrome DevTools 实锤:
- Elements → 找到目标元素 → Computed → 拉到底找
font-feature-settings,确认值未被 strike-through - Fonts 面板 → 点开当前实际渲染的字体 → 查 “OpenType Features” 列表,确认
liga已勾选 - 写测试文本:
fi fl ff ct st Th 1/2,比普通英文更容易暴露失效点 - 注意平台差异:
cvXX在 macOS Safari 上支持度明显低于 Chrome/Edge,别只在一个环境测
哪些字体真能用 liga 连字
不是所有“西文字体”都自带连字,得查 release notes 或用 FontDrop 测。稳妥选择:
- ✅ 推荐即用:
Georgia(系统自带)、IBM Plex Serif、Source Serif Pro、Smiley Sans(得意黑) - ✅ 需手动加载完整版:
IBM Plex Sans(Google Fonts 默认版不含dlig,得用 GitHub 发布页的 WOFF2 完整包) - ❌ 默认不行:
Roboto、Inter、Open Sans(免费 Web 版本均裁掉了 OpenType 特性表)
真正容易被忽略的是:启用特性 ≠ 字体已就绪。如果用了异步加载或 font-display: optional,连字可能永远不出现——这不是 CSS 的错,是字体链路卡在了第一步。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











