CSS font-face font size 호환성 문제 파이어 폭

Question

그래서 HTML/CSS를 사용하여 단일 페이지 레이아웃을 디자인했습니다. 페이지는 여기에서 찾을 수 있습니다 :

http://letsrob.org/

따라서, 페이지의 헤더 텍스트 내가 글꼴 얼굴 속성을 사용하여로드 한 사용자 정의 글꼴입니다. 폰트 크기와 얼굴은 크롬에서 완벽하지만 파이어 폭스에서는 크기가 더 크며 때로는 폰트 자체가 약간 다르게 보입니다. 이게 왜 그렇게? 혼자서 머리 글자 때문에 페이지 전체가 엉망이됩니다!

내 글꼴 얼굴 코드 :

@font-face { 
    font-family: "logotext"; 
    src: url(http://letsrob.org/css/BEBAS.ttf) format("truetype"); 
} 
@font-face { 
    font-family: "captiontext"; 
    src: url(http://letsrob.org/css/Franchise-Bold-hinted.ttf) format("truetype"); 
} 

내 헤더 CSS 클래스 :

<div id="banner" style="margin-top:20px;color:white;font-weight:bold;font-size:1.75em;font-family:logotext;text-align:center;">Reclaim Our Beaches</div> 

<div style="color:white;font-weight:bold;font-size:3em;font-family:captiontext;text-align:center;margin-top:20px;">ROB SYMPOSIUM: Talking trash, Exposing waste</div> 

<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:20px;">10AM to 5PM, 18 & 19th AUGUST,2012</div> 
<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:10px;">Conference Hall, School of Media Studies, Loyola College, Chennai</div> 

붕괴를보고 파이어 폭스를 사용하여 페이지를 방문하십시오. 그것은 크롬에 완벽하게 작동합니다!

미리 감사드립니다.

Answer 1

글꼴의 유일한 무게는 굵게 보입니다. CSS에 font-weight:bold을 지정했기 때문에 Firefox는 글리프를 확장하여 이미 굵은 글꼴을 자동 굵게 표시하려고합니다. 해당 규칙을 제거하면 수정됩니다 (또한 Mac의 Chrome에서도 좋음).