Question

我目前正在玩可变字体。我已经实现了一种工作可变字体，并且想要更改悬停时<h3>的权重。

在悬停上使用font-variation-settings: 'wght' 200;和font-variation-settings: 'wght' 500;可以在本地正常工作，但是一旦我将其推送到Github上的master分支并通过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的资产优化系统引起了该问题。关闭设置中“构建和部署”下的“缩小CSS”即可解决该问题。 Netlify的大力支持帮助我弄清了这一点。

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

1 个答案: