Firefox无法加载自托管Public Sans可变字体，<code>元素显示异常求助

兄弟，我刚好踩过类似的Firefox可变字体加载坑，看你的描述，问题大概率出在@font-face里的format格式标识符上！

Firefox对可变字体的格式命名要求特别严格，你写的format('ttf supports variations')和format('ttf-variations')都不是标准写法，Chrome兼容性宽松能忽略错误加载，但Firefox直接不认，所以才会报“downloadable font: no supported format found”的错误，进而 fallback 到系统 sans serif 字体，权重也只能识别本地安装的400/700固定值。

给你几个亲测有效的解决步骤：

1. 修正@font-face的格式标识符
   可变TrueType字体的标准格式名是truetype-variations，同时保留普通的truetype作为兼容 fallback，调整后的代码应该是这样：

   @font-face {
     font-family: 'Public Sans';
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
     src: local(''),
          url('fonts/PublicSans-Italic-VariableFont_wght.ttf') format('truetype-variations'),
          url('fonts/PublicSans-Italic-VariableFont_wght.ttf') format('truetype');
   }
   
   @font-face {
     font-family: 'Public Sans';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: local(''),
          url('fonts/PublicSans-VariableFont_wght.ttf') format('truetype-variations'),
          url('fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
   }
   

2. 排查字体路径与缓存问题

   • 确认fonts/目录和你的CSS文件路径对应正确，比如CSS在assets/css/下，那字体路径应该是../fonts/xxx.ttf，或者直接用站点根路径/fonts/xxx.ttf更稳妥；
   • 清空Firefox的缓存（快捷键Ctrl+Shift+Delete），重启浏览器再测试——Firefox有时候会死死缓存旧的字体资源，导致修改不生效。

3. 排除本地字体干扰
   你说本地安装了Public Sans，Firefox可能优先加载本地的固定权重版本，而非你自托管的可变字体。可以把local('')改成明确的可变字体本地名称（比如local('Public Sans Variable')），或者干脆去掉local('')强制加载自托管字体，测试是否是本地字体搞的鬼。

按上面的步骤改完，应该就能让Firefox正常识别你的可变字体了，元素的样式也会和Chrome一致～