css3 애니메이션 문제 글꼴 렌더링

Question

질문이 있습니다. 저는 현재 텍스트 애니메이션 작업을하고 있는데 약간 문제가 있습니다. -webkit-transform과 같은 속성을 사용할 때 내 글꼴은 애니메이션 중에 일반 글꼴에서 얇은 글꼴로 이동하고 애니메이션이 끝나면 다시 정상 글꼴로 돌아갑니다. 후

:

(애니메이션 전과 중) 두 사진

전에 여기에

@-webkit-keyframes flipOne { 
    0% { 
     -webkit-transform: perspective(40000px) rotateY(0); 
     -webkit-animation-timing-function: ease-out; 
    } 
    100% { 
     -webkit-transform: perspective(40000px) rotateY(720deg); 
     -webkit-animation-timing-function: ease-in; 
    } 
} 

과 : 여기

애니메이션에 대한 내 코드입니다

그것은 정확히 (애니메이션 중 또는 후 이전 또는) 글꼴

에 대해 동일한 설정이 렌더링 설정인가요이야? 그렇다면, 제게 작은 팁을 주시겠습니까? 사전에

감사합니다.

Answer 1

이것은 Safari에서 수행하는 글꼴 다듬기, 즉 텍스트에 앤티 앨리어싱을 적용하는 것과 관련이 있습니다. 내 생각 엔 애니메이션을 적용하는 동안 스무딩이 적용되지 않는다는 것입니다.

나는 다음을 설정하면 문제를 해결할 것이라고 생각한다 것 :

-webkit-font-smoothing: none; 

하지만 대부분 텍스트가 모든 시간을 픽셀 화 렌더링으로도 약간의 문제가 될 수 있습니다. 나는 지금 이것을 시험 할 수단이 없다. 미안하다. 당신이 정확히 반반하게 적용 할 수있는 상태에

-webkit-font-smoothing: antialiased; 

같은

추가 뭔가. 다시 말하지만 이것은 단지 추측이며 아직 CSS3 기반 솔루션이 없을 수도 있습니다. 이 경우 컨테이너 요소에 크기 조정 (예 : 확대/축소)을 적용하고 글꼴 크기에 EM 값을 사용하지 않아도됩니다. 응답 성있는 컨테이너를 만드십시오.

그 중 하나라도 도움이되지 않는다면 다른 방법은 없지만 여기에 자바 스크립트를 적용하는 것입니다.

Answer 2

비슷한 문제가 발생하여 여기에서 의견을 찾았습니다. 이 문제를 추가하여 :

-webkit-font-smoothing: antialiased; 

사파리에서 내 문제를 해결하는 것 (하지만 화면이 망막 일이 아니다). 그러나 이것을 신중하게 확인한 후에 다른 브라우저에서 보였던 것보다 조금 더 슬림하게 보입니다. 그래서 이것을 다음으로 변경했습니다 :

-webkit-font-smoothing: subpixel-antialiased; 

그리고 내 문제가 완벽하게 해결되었습니다.

일부 사용자가 같은 문제를 해결할 수 있도록 여기에 의견을 남기십시오.