나는 모든 스타일링을 위해 CSS를 사용하는 웹 사이트를 가지고 있으며, Windows에서는 줄 간격과 글꼴 크기가 모두 Firefox, Opera, IE, Safari, Chrome에 일관되게 적용됩니다.Mac OS의 Safari에서 글꼴 크기가 왜 그렇게 작습니까?
나는 맥 (스노우 레오파드)의 파이어 폭스에서 글꼴을 시험해 보았지만 글꼴은 일반적으로 윈도우보다 약간 굵게 보였다. 일반적인 크기는 비슷했다.
그러나 Mac의 Safari에서는 모든 글꼴이 훨씬 작아 보이고 줄 간격도 훨씬 엄격합니다.
가능한 원인은 무엇입니까? 알려진 해결 방법이있는 것으로 알려진 시나리오입니까? 당신은 상황을 확인하려는 경우
, 해당 사이트는 다음과 같습니다 http://www.marcusstarnes.co.uk
감사
당신이 em에서 글꼴 크기 설정 때문에 (좋은 일을 - 그 변경하지 마십시오!) 글꼴 크기는 브라우저 설정/사용자 기본 설정에 따라 다릅니다. Safari에서 더 작은 글꼴 세트를 사용했을 것입니다.
반면에 "모든 브라우저는 반드시 같아야합니다. 아니면 세상이 끝나야합니다"캠프에 있다면 em을 사용하면 안됩니다.
리셋 양식의 line-height: 1에 대해 확실하지 않습니다. 그게 내게 잘못되었습니다 ...
편집 : 오, 그냥 방금 font-size:62.5%;을 발견했습니다. 내가 말한 것을 바꿀 수는 없지만 사용자의 선호하는 크기의 3 분의 2를 사용하기 때문에 많은 사람들에게는 불편할 정도로 작습니다.
예, 스타일 시트에 html 요소에 대한 62.5 %로 글꼴 크기를 설정했지만 1.1em (나는 약 11px에 대해 나오는 믿습니다) 글꼴 크기를 설정합니다. body 요소에 대해. 나는 온라인에서 다양한 기사를 읽음으로써이 접근법이 꽤 많이 사용된다는 것을 이해한다. 그래서 글꼴 크기를 'em'으로 지정할 때 글꼴 크기가 얼마나 커지는지 쉽게 이해할 수있다 (1.2em = 12px, 1.6 em = 16px 등). – marcusstarnes
나는이 기사가 어떻게 그 가정에 왔는지 모른다. 1em = 10px라고 가정합니다. 하지만 그렇지 않습니다. 1em은 사용자가 브라우저 환경 설정에서 설정 한 크기입니다. HTML/CSS의 접근성을 유지하면서 디자이너가 "완벽 함"을 위해 "필요성"을 결합하려는 시도는 잘못된 것입니다. – RoToRa
그들은 실제로 사용자 브라우저 기본값이 'medium'으로 설정되어 있다고 가정합니다. 이는 16px라고 생각합니다. 이것은 내가 언급 한 기사 중 하나입니다 : http://clagnut.com/blog/348/.아마 나는이 62.5 % 접근법을 사용하면 안된다. – marcusstarnes
나는 이것이 이전 게시물 인 것을 알고 있지만, 나는 최근에 같은 문제에 부딪쳤다. 문제가있는 유일한 브라우저는 Mac의 Safari뿐입니다. 내가 문제를 해결하고 결국 것은에서 내 리셋을 변경했다 :
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 16px; -ms-text-size-adjust: 16px; }
글꼴 크기가 눈에 띄게 작습니다 (창문에)! 나는 또한 회색의 콘트라스트를 증가시킬 것이다. 유용성 ftw :) 멋진 사진 비록 :) –