Firefox에서 @ font-face 세로 맞춤 문제

Question

안녕하세요. 상단 및 같은 글꼴에서 여백을 갖는 것처럼 렌더링되는 글꼴에 문제가 있습니다. 다른 모든 브라우저에서 제대로 작동합니다 (Windows 및 우분투에서 테스트했습니다).

내 문제가

처럼 내가 여기 글꼴 얼굴을 생성하고의 글꼴 다람쥐를 사용했습니다

다른 브라우저 것 같다가있는 코드는 생성됨

@font-face { 
    font-family: 'garrisons'; 
    src:url('../fonts/garrisons-regular-webfont.ttf'); 
    src: url('../fonts/garrisons-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/garrisons-regular-webfont.woff') format('woff'), 
     url('../fonts/garrisons-regular-webfont.ttf') format('truetype'), 
     url('../fonts/garrisons-regular-webfont.svg#garrison_sansregular') format('svg'); 
    font-weight: normal; 
    line-height:30px; 
} 


@font-face { 
    font-family: 'garrisonsb'; 
    src: url('../fonts/garrisons-bold-webfont.ttf'); 
    src: url('../fonts/garrisons-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/garrisons-bold-webfont.woff') format('woff'), 
     url('../fonts/garrisons-bold-webfont.ttf') format('truetype'), 
     url('../fonts/garrisons-bold-webfont.svg#garrison_sansbold') format('svg'); 
    font-weight: normal; 
    line-height:30px; 
} 

이 문제를 해결할 수있는 방법은 무엇입니까? 미리 감사드립니다.

Answer 1

제공 한 다른 글꼴 형식은 브라우저마다 다르게 렌더링됩니다. 예를 들어 IE는 .eot을 지원하지만 Chrome은 .ttf를 지원합니다. 브라우저의 차이점은 다양한 브라우저 변형에 대한 솔루션을 제공 할 때 행복한 매체를 찾아야한다는 것을 의미합니다.

브라우저의 한 유형에 어리석은 모양이되지 않도록 하단 여백을 추가하십시오. 그것의 부정확 한 과정, 그러나 당신이 생각하는 결과가 모든 브라우저에 가장 잘 작동한다고 생각하는 것이 종종 최선의 행동 경로입니다.