2013-01-08 3 views
1

응답 성있는 사이트를 개발 중이며 모바일 장치가 없습니다. (여전히 어둠의 시대에 살고 있음) 어쨌든, 제 동료가 ipad에 사이트의 스크린 샷을 보냈습니다.모바일 사파리 선도/줄 높이 문제 (@ font-face 사용)

선행/선 높이는 끔찍하지만 일반적인 Safari에서는 괜찮아 보입니다. 여기

@font-face {font-family: 'Rubrik-Regular';src: url('fonts/237360_5_0.eot');src: url('fonts/237360_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_5_0.woff') format('woff'),url('fonts/237360_5_0.ttf') format('truetype'); font-style: normal; font-weight: normal; } 
@font-face {font-family: 'Rubrik-Medium';src: url('fonts/237360_6_0.eot');src: url('fonts/237360_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_6_0.woff') format('woff'),url('fonts/237360_6_0.ttf') format('truetype'); font-style: normal; font-weight: bold; } 
@font-face {font-family: 'Rubrik-Bold';src: url('fonts/237360_7_0.eot');src: url('fonts/237360_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_7_0.woff') format('woff'),url('fonts/237360_7_0.ttf') format('truetype'); font-style: normal; font-weight: bold; } 

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} 

html{font-size:81.25%;-webkit-text-size-adjust:81.25%;-ms-text-size-adjust:81.25%} /* shrink to ~13px body font without changing all other sizes */ 
/* 16px base font size with 162.5% (26px) line height */ 
body, button, input, select, textarea { font: 1em/1.6154em 'Rubrik-Regular', Arial, Verdana, sans-serif; color: #262626; } 

측면 비교하여 측면입니다 : 여기에 관련된 일부의 CSS는 (내 생각)

Mobile vs Desktop Safari

live demo link

왜 행 높이가 존중되고 있지? 이 보인다

+0

이미 해결 되었습니까? iOS Simulator (공식 Apple 툴)에서 보았을 때 선의 높이가 좋았습니다. – Nick

+0

예, 감사합니다 @ 닉. 나는 계속해서 작업을하고 마침내 -webkit-text-size-adjust의 오류를 발견했다. – helgatheviking

답변

0

그것을 해결 한합니다 :

html{ font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%} 

내가 잘못과 같이 글꼴 크기를 조정하기 위해 노력했다 :

html{ font-size: 82.5%; -webkit-text-size-adjust:82.5%; -ms-text-size-adjust:82.5%} 

을 그리고 크기가 매개 변수가 저변에서 모바일 내 인쇄술을 죽이는 조정 장치.