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

时间:2018-09-21 11:35:22

标签: css netlify

我目前正在玩可变字体。 我已经实现了一种工作可变字体,并且想要更改悬停时<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不完全支持可变字体。

1 个答案:

答案 0 :(得分:0)

原来是Netlify的资产优化系统引起了该问题。关闭设置中“构建和部署”下的“缩小CSS”即可解决该问题。 Netlify的大力支持帮助我弄清了这一点。