字体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

您无法将{strong>动画或过渡与font-family一起使用。这意味着，您实际上可以执行此操作，但它会立即更改font-family，而不是从font-family变为另一个 a { ... transition: font-size .2s ease; ... transition: font-family .2s ease; } 。

但我找到了一个很好的解决方法（here）：

  

您可以执行以下操作：有两个div，每个div都有相同的文本   不同的字体。第二个div绝对位于第一个div之下   div和默认隐藏。当时代到来＆＃34;变形＆＃34;字体，   将第一个可见div不透明度设置为0，将第二个div设置为1。   它应该看起来像是变形而牺牲了一点点   令人费解的标记。

<强>提示

您似乎执行以下操作：

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

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

<Item>
  <Platform>itunes</Platform>
  <PlatformID>102224185</PlatformID>
  <Info>
    <LanguageOfMetadata>EN</LanguageOfMetadata>
    <Name>Commander In Chief</Name>
    <Studio>abc</Studio>
  </Info>
  <Type>TVSeries</Type>
</Item>

Answer 2

现代浏览器现在支持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;
}

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

并非所有字体和选项都受支持，如果要查找可变字体的资源，可以转到this link。

Answer 3

我在 Stack Overflow 中提出的另一个 question 中回答了这个问题。
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