font-feature-settings在各浏览器效果不一致，主因是WebKit、Blink、Gecko引擎对OpenType特性的支持差异大：Safari支持最全，Chrome 120+收紧dlig等特性，默认禁用；Firefox对ss01等解析不稳定，且不触发字体回退重排。
font-feature-settings 为什么在 Safari、Chrome、Firefox 上效果不一致
不是你写错了值，而是 OpenType 特性支持率在各浏览器引擎里差异极大。Safari（WebKit）对 font-feature-settings 支持最完整，尤其对中文连字（dlig）、比例数字（pnum）、表格式数字（tnum）等特性响应积极；Chrome（Blink）从 120+ 开始逐步收紧支持，dlig 和 ss01 等上下文敏感特性默认被禁用；Firefox（Gecko）虽支持基础特性如 kern、liga，但对自定义 stylistic sets（ss01–ss20）解析不稳定，且不触发字体回退链重排。
中文字体启用 liga 或 dlig 却没变化？先查字体本身是否带这些特性
OpenType 特性必须由字体文件内嵌支持，CSS 只是“开关”，不是“生成器”。很多免费中文字体（如 Noto Sans CJK、思源黑体）只内置 kern（字距调整）和 locl（本地化替代），根本不含 dlig（自由连字）或 ss01（风格集 1）。实操建议：
- 用 opentype.js 字体检查器 打开你的 .woff2 文件，查看
GSUB表是否包含对应特性标签 - 避免对“苹方-简”“微软雅黑”等系统字体强开
dlig——它们压根没实现该特性，声明了也白搭 - 真正支持中文连字的字体极少，目前仅 HarmonyOS Sans、Alibaba PuHuiTi 2.0、Source Han Serif 的部分字重明确声明了
dlig支持
font-feature-settings 声明顺序和语法错误导致特性被静默忽略
浏览器遇到非法值或拼写错误时，不会报错，而是整条声明失效。常见陷阱：
- 漏掉引号：
font-feature-settings: "kern"1, "liga"1✅；font-feature-settings: kern1, liga1❌（被整个丢弃） - 数值类型错乱：
"tnum" on在 Firefox 中无效，必须写"tnum"1；"ss01"true是非法值 - 特性冲突：同时开
"tnum"1（表格式数字）和"onum"1（旧式数字）会互相覆盖，最终以右侧为准 - 未配
font-variant-numeric：单独开"tnum"1在某些 Chrome 版本下不生效，需搭配font-variant-numeric: tabular-nums
移动端 WebView（微信、钉钉）对 font-feature-settings 的支持几乎为零
iOS WKWebView 和安卓主流 WebView（基于 Chromium 110–125）均未启用 OpenType 高级特性解析管线。即使你在 Safari Desktop 上看到 "calt"1（上下文替代）正常生效，在微信内打开同一页面，所有 font-feature-settings 声明都会被跳过。这不是 bug，是 WebView 内核主动裁剪了非核心排版能力。应对方式只有两个：
- 对关键文案（如价格、时间）改用 SVG 或图片替代，确保视觉一致性
- 把依赖高级特性的设计降级为 CSS fallback 方案，例如用
letter-spacing模拟字距微调，而非强依赖"kern"1
真正容易被忽略的是：OpenType 特性不是“开了就有效”，它需要字体、浏览器、渲染上下文三者同时在线。多数项目卡点不在 CSS 写法，而在没验证字体文件是否真含该特性，也没测过目标 WebView 是否认这个声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
