font-variation-settings 的语法在浏览器中被更改

Question

我目前正在研究可变字体。我已经实现了一个工作变量字体，想在悬停时更改 <h3> 的粗细。

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

Screenshot from inspector

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

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

我实现了这样的字体：

@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 的资产优化系统导致了这个问题。在设置中关闭 "Build & deploy" 下的 "Minify CSS" 即可解决。 Netlify 的大力支持帮助我解决了这个问题。

font-variation-settings 的语法在浏览器中被更改

Syntax of font-variation-settings is altered in browser

css

netlify