字体变体设置的语法在浏览器中更改

Question

我目前正在玩变字体。 我已经实现了一个工作变量字体，并希望在悬停时更改<h3>的权重。

在悬停上使用font-variation-settings: 'wght' 200;和font-variation-settings: 'wght' 500;在本地工作得很好，但是一旦我将其推送到 Github 上的主分支并通过 Netlify 发布，它就会停止工作。与Chrome，Safari和Firefox*中的检查器一起检查它，发现单引号被删除，所以它只是font-variation-settings: wght 200。我仔细检查了上传的.css文件，它在那里正确。

来自检查器的屏幕截图

如果我在检查器中手动添加单引号，它会开始在实时页面上工作。

我读到的每个关于可变字体的来源都使用这种字体变体设置的语法(我也尝试过用双引号(，所以我不知道为什么它会丢失。

我像这样实现了字体：

@font-face {
font-family: 'Variable';
src:url("_assets/fonts/variable.ttf") format("truetype-variations");
font-weight: 200;
font-style: normal;
font-stretch: normal;
}

CSS是这样的

.inner h3 {
font-variation-settings: 'wght' 200;
}
.inner:hover h3 {
font-variation-settings: 'wght' 500;
}

字体在实时页面上正确显示，只是粗细更改不起作用。

*我知道 Firefox 不完全支持可变字体。

Answer 1

事实证明，Netlify的资产优化系统导致了这个问题。在设置中的"构建和部署"下关闭"缩小CSS"解决了这个问题。 Netlify的大力支持帮助我弄清楚了这个问题。