글꼴 계열 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; 
} 

내가 시도하는 것 : 당신은 애니메이션 또는 전환 font-family와을 사용할 수 없습니다

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을 변경합니다. 당신은 다음을 할 수

:

그러나

나는 이것에 대한 좋은 해결 방법 ( here를) 발견 동일한 텍스트 만 다른 글꼴로이 div의 각이있다. 두 번째 div는 첫 번째 div 아래 절대 위치하며 기본적으로 숨겨져 있습니다. 글꼴이 "morph"될 때 은 0으로 첫 번째로 표시되는 div 불투명도를 애니메이션하고 두 번째 div는 1로 애니메이션합니다. 복잡한 표식을 희생하여 모양이 변형 된 것처럼 보입니다.

는 힌트는 다음과 같이 할 것 같다

:

a { 
    ... 
    transition: font-size .2s ease; 
    ... 
    transition: font-family .2s ease; 
} 

그러나이 경우

가, 두 번째 규칙은 첫 번째 규칙을 덮어 쓰기 때문에 다음은 일반적으로 무엇을 해야한다 :

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