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

不能使用动画或过渡与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;