我目前正在玩可变字体。
我已经实现了一种工作可变字体,并且想要更改悬停时<h3>
的权重。
在悬停上使用font-variation-settings: 'wght' 200;
和font-variation-settings: 'wght' 500;
可以在本地正常工作,但是一旦我将其推送到Github上的master分支并通过Netlify发布后,它就会停止工作。通过在Chrome,Safari和Firefox *中使用检查器进行检查,发现单引号已被删除,因此只是font-variation-settings: wght 200
。我仔细检查了上传的.css文件,它正确地位于其中。
如果我在检查器中手动添加单引号,它将开始在实时页面上工作。
我所读到的有关可变字体的所有资料都使用了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不完全支持可变字体。
答案 0 :(得分:0)
原来是Netlify的资产优化系统引起了该问题。关闭设置中“构建和部署”下的“缩小CSS”即可解决该问题。 Netlify的大力支持帮助我弄清了这一点。