OS의 서로 다른 수직 메트릭이있는 사용자 정의 글꼴

Question

내가 만들고있는 페이지에 사용자 정의 글꼴을 포함하려고합니다. 내 문제는 글꼴 수직 정렬 내 우분투 개발 컴퓨터와 Windows PC에 달라 보이는 것입니다.

첫째, 여기에 문제를

편집을 이해할 수있는 이미지입니다 :

문제 글꼴 사이의 거리가된다 불행하게도 나는, 그래서 여기에 이미지를 게시 할 수 없습니다 새 사용자로 설명입니다 기준선과 그 밑에있는 요소. 내 우분투 기계에는 설명 할 수없는 틈이있어서 패딩/마진이 아닙니다. 텍스트를 선택하더라도 잘못 정렬됩니다.

두 가지 모두 Chrome에서 테스트되었습니다. 동일한 html/css (물론 같은 페이지)입니다. 코드 및 크롬의 검사기 도구에서 아래 여백/패딩이 없습니다. 같은 선 높이. 글꼴은 Museo입니다. 둘 다 글꼴의 .woff 버전을로드합니다. 기타 다른 정보는 기꺼이 제공합니다.

글꼴을 가져 오기위한 CSS는 : 나는 WOFF 선언을 제거하고 TTF 폰트를 제공 할 때

@font-face { 
    font-family: 'Museo-700'; 
    src: url('path-to-eot'); 
    src: url('path-to-eot?') format('embedded-opentype'), 
     url('path-to-woff') format('woff'), 
     url('path-to-ttf') format('truetype'); 
} 

문제도 지속되었다.

나는 정말 이걸 잃었는데, 내가 어떻게 만들 수 있을지 모르겠다. 어떤 종류의 도움이라도 대단히 감사하게 될 것입니다!

Answer 1

글꼴에는 3 세트의 포함 된 수직 메트릭 정보가 있습니다. 하나는 Mac 용으로, 다른 하나는 * nix에서 일반적으로 사용하는 세트입니다. 이들은 동기화가 어려울 수 있지만 Font-face Generator는이 값들을 동일하게하려고 시도합니다. 시도 해봐? 구글 유형 팀

http://www.fontsquirrel.com/fontface/generator

상세 정보 : http://www.fontsquirrel.com/fonts/Symbol-Signs

내가 사전 패키지 @ 글꼴 얼굴 키트를 다운로드 :

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

Answer 2

나는이 글꼴과 같은 문제가 없었다 측정 항목은 Mac과 PC간에 일치하지 않았습니다.

해결 방법은 다운로드 한 키트에서 TTF 글꼴을 가져 와서 Font Squirrel 생성기로 새 @ 글꼴 -면 키트를 내보내는 것입니다. 생성기에는 전문가 설정의 "Fixed Vertical Metrics"라는 체크 박스가 있습니다. 키트를 생성하기 전에 이것이 선택되었는지 확인하십시오.

Answer 3

행의 높이 css 속성에 고정 값 (예 : px)을 설정합니다.