字体CSS转换

Question

我想得到一个悬停动画,同时改变font-size和font-family.在字体大小转换完成后,我无法准确地更改字体系列.这甚至可能吗？

是)我有的:

a{
 -webkit-transition: font-size .2s ease;
 -moz-transition: font-size .2s ease;
 -o-transition: font-size .2s ease;
 -ms-transition:font-size .2s ease;
 transition: font-size .2s ease;
}

a:hover{
 font-family: "MyHoverFont";
 font-size: 3em;
}

我尝试了什么:

a{
 ...
 -webkit-transition: font-family.2s ease;
 -moz-transition: font-family .2s ease;
 -o-transition: font-family .2s ease;
 -ms-transition: font-family .2s ease;
 transition: font-family .2s ease;
}

a:hover{
 ...
 font-family: "MyHoverFont"
}

Answer 1

现代浏览器现在支持可变字体，您可以在其中控制可用字体的设置。

您也可以转到此示例来控制设置。

var changes = [
  "'CASL' 1, 'MONO' 1, 'wght' 758, 'slnt' -14",
  "'CASL' 0, 'MONO' 0.24, 'wght' 481, 'slnt' -2" 
];

// style="font-variation-settings: ... "
text.style.fontVariationSettings = changes[1];

// Change variation every 2 sec
var index = 0;
setInterval(function(){
   text.style.fontVariationSettings = changes[index];
   index = index === 0 ? 1 : 0;
}, 2000);

@font-face{
	font-family:"Recursive";
	src:url("https://d33wubrfki0l68.cloudfront.net/0fb48cf42677cf004e48f2608a8521a4ca06b48d/8a39e/assets/fonts/recursive-mono_casl_wght_slnt_ital--2019_11_05-00_13.woff2") format("woff2-variations");
	font-weight:300 900;
	font-display:swap
}

#text{
  text-align: center;
  height: 100px;
  font-size: 50px;
  line-height: 100px;
  font-family: Recursive;
  font-weight: 500;
  transition: 0.5s font-variation-settings ease-in;
}

<div id="text">Hello World</div>

并非所有字体和选项都受支持，如果您想找到一些可变字体的资源，可以转到此链接。

Answer 2

不能使用动画或过渡使用font-family.这意味着,你实际上可以做到这一点,但它会font-family立即改变而不是从一个变形font-family到另一个.

但我找到了一个很好的解决方法(这里):

您可以执行以下操作:有两个div,每个div具有相同的文本但不同的字体.第二个div绝对位于第一个div下方并默认隐藏.当时间"变形"字体时,将第一个可见div不透明度设置为0,将第二个div设置为1.它应该看起来像是变形而牺牲了更复杂的标记.

暗示

您似乎执行以下操作:

 a {
   ...
   transition: font-size .2s ease;
   ...
   transition: font-family .2s ease;
 }

但在这种情况下,第二条规则会覆盖第一条规则,因此以下是您通常所做的事情:

transition: font-size .2s ease, font-family .2s ease;