为什么Google字体Inter搭配font-variant-numeric: slashed-zero不生效？

常见触发原因 #

• 仅靠font-variant-numeric: slashed-zero无法稳定生效：这是CSS定义的通用数值变体语法，不少浏览器在加载Google Fonts提供的Inter时，不会自动把这个语法映射到Inter原生的OpenType斜杠零特性，最后导致设置完全不触发。
• 本地安装的Inter版本不对：斜杠零是Inter 2.0之后才加上的可选字形，早期1.x版本的Inter根本没有设计这个变体，就算你本地装了老版本的Inter，在字体预览里也找不到斜杠零的对应效果。
• 特性冲突：Inter的风格集ss01的作用就是把斜杠零替换成中间带圆点的零，哪怕你开了斜杠零的特性，只要ss01处于激活状态，最终显示的效果依然不是你要的斜杠零。

直接可用的修复代码 #

把原有CSS替换为下面写法，兼顾不同浏览器的兼容逻辑：

h2 {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: slashed-zero;
  font-feature-settings: 
    "zero" 1,
    "ss01" 0;
}

补充排查提示 #

• 浏览器加载字体时会优先调用系统本地安装的同名字体，如果本地存了旧版本的Inter，就算CDN拉的是最新版字体也会失效，测试的时候可以开无痕窗口排除本地字体的干扰，或者直接卸载本地的旧版Inter。
• 部分Windows环境下的浏览器/软件默认不会读取OpenType的高级自定义特性，这种情况就算CSS写的完全正确，也不会渲染出自定义的数字变体。

内容的提问来源于stack exchange，提问作者Diego Ponciano