요소가 CSS3- 애니메이션 일 때 글꼴 효과/처리 적용 Safari

Question

내 사이트에서 사용자 정의 글꼴을 사용하고 있습니다.

@font-face { 
    font-family: 'ProximaNovaCondensed-Regular'; 
    src: url('/media/fonts/proximanovacond-regular-webfont.eot'); 
    src: url('/media/fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('/media/fonts/proximanovacond-regular-webfont.woff') format('woff'), 
    url('/media/fonts/proximanovacond-regular-webfont.ttf') format('truetype'), 
    url('/media/fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

맥동 CSS3 애니메이션을 텍스트 요소에 적용하면 글꼴 렌더링 방법이 변경된 것처럼 보입니다. 이 Safari에서 렌더링 된

:

이 비교 이미지를 참조하십시오. 애니메이션이 적용되면 Safari changing font weights when unrelated animations are running

이가 말했다 무엇에 따르면, 렌더링은 GPU에 의해 수행됩니다

나는이 Q/A를 발견했다. 링크의 Q/A에서 문제가 영향을받는 요소 이외의 다른 요소에 초점을 맞추고 있지만, 실제로는 실제 요소가 영향을받습니다.

질문 : 난 내 페이지에 걸쳐 정확한 (통합) 폰트 렌더링 품질을 얻을 수 있도록

어떻게 든 관계없이 내가 애니메이션을 사용하는지의 여부, 끄거나 동작을 수정할 수 있습니까?

Answer 1

완벽한 해결책은 없지만 -webkit-font-smoothing: antialiased;을 추가하여 도움이되는지 확인해보십시오. 약간 더 얇은 글꼴을 줄 수도 있지만 적어도 통합 될 것입니다.

EDIT-죄송 합니다만, "안티 앨리어싱 된"수정본이 링크 된 Q/A에 게시 된 것을 보았습니다.

간혹 영향을받는 요소에 -webkit-backface-visibility: hidden;을 추가하는 것이 도움이되지만, 그 이유는 모르겠습니다. 또한 위의 수정과 같은 하드웨어 가속을 강제로 글꼴을 만들 것입니다 -webkit-transform: translate3d(0,0,0);, 통합하지만, 약간 얇은를 시도 할 수 있습니다

... 도움이

희망!