字体家族CSS过渡

4dc9hkyq 于 2023-02-10 发布在其他

关注(0)|答案(4)|浏览(140)

我想得到一个悬停动画，同时改变字体大小和字体系列。我没有设法改变回字体系列当字体大小的转变已经完成。这是甚至可能的？

我拥有的：

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"
}

css

来源：https://stackoverflow.com/questions/38925840/font-family-css-transition

4条答案

按热度按时间

dauxcl2d1#

你不能在font-family中使用动画或者过渡。这意味着，你实际上可以这样做，但是它会立即改变font-family，而不是从一个font-family变形到另一个。
但我找到了一个很好的解决方法（here）：
您可以执行以下操作：我有两个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;

赞(0）回复(0）举报 2023-02-10

sh7euo9m2#

现代浏览器现在支持Variable fonts，在那里你可以控制可用字体的设置。
您也可以转到this example来控制设置。

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;
}