可变字体font-variation-settings适配问题：Chrome卡顿、Firefox无响应求助

嘿，我刚好遇到过类似的可变字体兼容问题，咱们一步步来解决：

一、先搞定Firefox的悬停失效问题 #

你代码里的font-variation-settings有个语法细节没注意——轴名和数值之间必须有空格！Firefox对这个语法的校验比Chrome/Safari严格很多，你写的"wght"0是不规范的，改成"wght" 0（引号和数字之间加空格）就能生效了。

另外给你个优化建议：如果你的字体用的是标准wght字重轴（绝大多数可变字体都支持这个标准轴），完全可以不用font-variation-settings，直接用font-weight属性，语法更简洁，兼容性也更好：

.item{ 
  font-weight: 100; /* 替换成你的初始字重值，比如100-900之间的数 */
  transition: font-weight .6s linear; 
  &:hover{ 
    font-weight: 900; /* 替换成你想要的悬停字重值 */
  } 
}

二、解决Chrome的卡顿问题 #

Chrome对font-variation-settings的过渡动画优化确实不如Safari，再加上你用了transition: all，浏览器会监听所有属性的变化，额外消耗性能，这大概率是卡顿的根源。可以从这几点优化：

• 换掉transition: all：明确指定过渡的属性，比如transition: font-variation-settings .6s linear;，如果用上面的font-weight过渡，性能会更优。
• 精简字体文件：有些可变字体体积大、包含了很多你不需要的轴（比如斜体、宽度轴），可以用字体压缩工具只保留wght轴，减少浏览器的渲染负担。
• 确认硬件加速开启：去Chrome的chrome://settings/system里检查"使用硬件加速模式（如果可用）"是否勾选，硬件加速能大幅提升字体动画的流畅度。

额外小提示 #

• 如果用的是自定义轴（不是wght这种标准轴），要确保字体文件里的轴定义符合规范，不然不同浏览器的支持会有差异。
• 测试前记得清一下浏览器缓存，旧缓存偶尔会导致奇怪的渲染bug。

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