字体系列 CSS 过渡

Question

我想获得一个同时更改字体大小和字体系列的悬停动画。 当字体大小转换完成时，我没有设法准确地改回字体系列。 这甚至可能吗？

我有什么：

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

您不能在font-family使用动画或过渡。 这意味着，您实际上可以这样做，但它会立即更改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;

Answer 2

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

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

 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 3

我在 Stack Overflow 中提出的另一个问题中回答了这个问题。
Javascript 演示位于： https : //www.cqrl.in/dev/font-transition-js.html
GitHub 代码在这里： https : //github.com/Sukii/font-transition
TUGBoat 论文在这里： https ://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html