预加载本地Google可变字体的正确语法及MIME类型确认

• 第一种写法 <link rel="preload" href="/fonts/Inconsolata-VariableFont_wdth-wght.ttf" as="font" type="font/truetype" crossorigin> 是完全正确且兼容性最佳的选择。
  可变TrueType字体本质上属于TrueType字体范畴，font/truetype是该类字体的标准通用MIME类型，所有支持可变字体的浏览器都能正确识别并处理，不存在功能问题。

• 第二种写法里的font/truetype-variations是专门为可变TrueType字体定义的细分MIME类型，虽然现代主流浏览器（Chrome、Firefox、Edge等）已支持，但旧版本浏览器可能无法识别这个类型，进而导致预加载逻辑失效。

关键注意点 #

无论使用哪种MIME类型，crossorigin属性都必须保留——即使是本地字体，浏览器处理字体资源时仍会遵循CORS规则，缺少该属性会导致预加载的字体无法被页面正常调用。

最终建议 #

如果需要覆盖尽可能多的浏览器版本，优先使用font/truetype的写法；若仅针对最新现代浏览器环境，两种写法均可行，但前者的兼容性更稳妥。

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