Firefox/Mac과 Safari/Mac 또는 Firefox/Win 사이의 글꼴 불일치

Question

Mac OS X에서 Firefox 3.5/3.6 (다른 버전을 사용해 보지 않았습니다)에서 이상한 렌더링 이상을 발견했습니다. 문제는보고되고 해결되었지만 대부분 CSS 측정 라인 높이는 단위 측정과 달리 정상으로 설정되었습니다. - Windows 용 Firefox 포함

<style> 
    h1{ 
     background-color:#f00; 
     font-size:40px; 
     line-height:40px; 
    } 
</style> 

<h1>This is a test</h1> 

Mac 용 파이어 폭스에서 텍스트 기준선이 다른 브라우저에 비해 높은 앉아 :

다음 코드를 가져 가라. 전에이 문제에 직면 한 사람이 있습니까? Mac 용 Firefox는 이상한 브라우저입니다. 나는 또한 이것이 폰트 기반이라는 것을 알아 냈다. 예를 들어 Arial로 변경하면 모든 곳에서 일관되게 렌더링됩니다. 불행히도 글꼴을 바꾸는 것은 나를위한 선택 사항이 아닙니다. 그리고 가능하다면 타이포 그라피의 이미지를 만드는 것을 피하고 싶습니다.

나는 통찰력에 감사드립니다! 봐 주셔서 감사합니다!

Answer 1

Mac 용 Firefox에서의 글꼴 렌더링과 다른 브라우저에서의 글꼴 렌더링 간의 약간의 차이점에 대한 매우 매력적인 예가 나와 있습니다. 나는 심지어 vertical-align: baseline; 설정이 결과를 변경하지 않기 때문에 Mac에서 FF가 잘못되었다고 말하고 싶습니다.

즉, 이미지를 사용하여 하나의 브라우저 렌더링을 에뮬레이션 할 이유가 전혀 없습니다. 웹 사이트는 모든 브라우저에서 동일하게 보이지 않아도됩니다.

Answer 2

Mac 및 Safari가 다른 브라우저 또는 운영 체제보다 훨씬 활판 인쇄기로 조정되어 문제가 발생할 수 있습니다. 글꼴을 표시 할 때 올바르게 표시 할 확률이 높습니다. 나는 이것을 수년에 걸쳐 무수한 경우에 읽었지만, 불행히도 그 이상으로는 기억할 수 없습니다. 누군가가 이것을 더 설명하는 링크와 함께 올 것이라고 확신합니다.

Answer 3

나는 이것이 오래된 문제라는 것을 알고 있지만 같은 문제에 대한 해결책을 찾을 때 우연히 발견했다. 연구는 타입 일 그 '세계의 나머지 부분에 대한 윈도우 중 하나가 될 것으로 보인다 테스트를 많이에서 (깜짝 놀람!) 그래서 여기 내 jQuery를이 해결의 ...

var OSName=""; 
if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows"; 
$('html').addClass(OSName); 

그럼 난 그냥 타겟으로 Windows에서 CSS와의 차이점을 수정하려면 html.windows h1으로 h1을 입력하십시오.

앞으로 누군가를 도울 수 있습니다!