字體家族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;