사파리, 사용자 정의 글꼴 구글 웹 글꼴의 투여 량들로 글꼴을 사용

Question

와 자간 ... 파이어 폭스와 사파리에서 광범위한 테스트 후

@import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800); 

, 내가에 두 브라우저를받지 않습니다 것을 완벽하게 인식하면서

자간

내가하려고 무엇이든간에, 내가 얻을 수없는 문자 : 모든 것이 완벽 픽셀 정확하게 내 포토샵의 원래 디자인 뷰와 같은 좋은, 내가 문제의 가장 불안하게 비틀 거렸다보기 오른쪽에 - 간격 웹킷 브라우저.

간단한 예 :

.text-basic { 
    font-weight:  200; 
    font-size:   16px; 
    letter-spacing:  0.52px; 
    line-height:  22px; 
} 

이 완벽하게 정상적으로 렌더링, 그런데 내가, 그것을 원하는 파이어 폭스 (사람이 반대하지 않는 한 [괜찮 15.5px 글꼴 크기에 내가 FF를 해킹하면 더 나은에서 ]).

그러나 Safari에서는 문자 간격만으로는 작동하지 않습니다.

일부 연구 결과, 문자 간격을 1px 미만으로 설정할 수 없다는 것을 알았지 만, 만약 내가 em 측정 값을 사용하면 그렇게한다고합니다. 그러면 그렇게 해.

letter-spacing: 0.0618em 

아무런 변화가 없습니다 :

나는까지 사용하는 경우. 변경 없음. 글자 간격이 너무 좁습니다.

내가 사용하지만 경우 :

letter-spacing: 0.0619em 

는 갑자기는 스냅, 및 문자 간격이 너무 높다. 10 단어의 텍스트 블록처럼 갑자기 너비가 50 픽셀 이상 늘어납니다.

나는 그것을 얻지 않는다.

누구든지 해결 방법을 알고 있습니까?

감사합니다.

Answer 1

이 문제에 대한 적절한 해결책은 없습니다. 사파리/웹킷은 이러한 것들을 잘못 렌더링합니다. 이 보인다

또 다른 스레드를 포함하는 유사한 문제 can be found here

Answer 2

사파리는 사용중인 장치에 관계없이 전체 픽셀로 반올림됩니다.

따라서 0.0618em과 0.0619em의 차이점은 0px에서 1px로 반올림되는 지점입니다.

문자 공간이 0.0619em과 1px를 사용하는 사파리에서 동일하다는 것을 알게되면;

불행히도 해결책이 없지만보고있는 내용을 설명하는 데 도움이되기를 바랍니다.

Answer 3

은 SVG 글꼴에 의해 발생할 수 있습니다! svg를 마지막으로 놓은 글꼴 - 얼굴 URL 순서를 바꾸면 문제가 해결됩니다.하지만 svg 글꼴이 사용되지 않고 렌더링이 더럽습니다 (