css - 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-variation-settings 的这种语法(我也用双引号试过)，所以我不知道为什么它会丢失。

我是这样实现字体的:

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