Internet Explorer 6, 7 버전에서 글씨의 크기가 제대로 표현되지 않는 문제가 있습니다.
11px 로 설정한 글자가 12px과 크기가 비슷하게 나타나는 문제가 그것이죠!
그리고 모든 사이트가 그런게 아니라 몇몇 사이트에서만 그런 문제가 나타나는게 더 신경쓰이게 만드는 이유였습니다.
현상
1px~19px을 각각의 브라우저에서 표현해 봤습니다.
font-family:Georgia,굴림;
10px, 11px, 12px의 한글의 글씨 크기가 다릅니다. (영문은 좀 낫네요)
제가 이것 저것 수행해 본 결과 다 그런 것은 아니고 몇몇 영문글꼴(Geneva)은 제대로 표시가 됩니다.
그런데, 거의 모든 영문 글꼴이 다 IE6에서는 이상하게 나타나더라는 것입니다.
원인
CSS 속성 중 font-family:Georgia, 굴림; 이 문제입니다.
font-family:굴림,Georgia; 라고 두 글꼴의 순서를 바꾸어 적어보도록 하겠습니다.
두 글꼴의 순서를 뒤집어 적었더니 글씨의 크기는 두 경우 모두 정상적으로 표현되는 것 같습니다.
그런데 영문 글꼴이 '굴림'체로 표현되었네요.
결국, 모든 일의 원인은 IE6이 글꼴을 표현할 때 영문 글꼴이 한글 글꼴보다 먼저 정의된 경우 글꼴의 크기를 제대로 표현하지 못하는 것 때문입니다.
잠깐!!! 영문글씨는 Georgia로 표현하고 싶은데 불가능한가???
해결책
가장 좋은 해결책은 모든 사람들이 Internet Explorer를 사용할 때 8 이상의 버전을 사용하는 것이겠죠?
네이버나 다음, 네이트도 다음해(2012)부터는 IE6을 지원하지 않기로 하고, 인터넷 사용환경 개선 캠페인도 시작했다고 합니다.
하지만!! 아직까지도 IE6을 사용하는 분들이 많은 관계로 신경을 쓰지 않을 수 없네요.
다른 방법도 많이 있겠지만, 제가 사용한 방법을 소개해 드릴게요.
적당히 버릴 것은 버리고 취할 것은 취하자는 전략에 의한 방법입니다.
우선 결과먼저!
IE6,7 버전에서는 글자의 크기를 선택하는 대신 영문 글꼴을 포기했습니다.
IE8,9 버전에서는 정상적으로 표시가 됩니다.
이정도 선에서 절충했습니다. 방법은 IE6의 CSS 핵을 이용하는 것입니다.
font-family:Georgia,굴림;
_font-family:굴림,Georgia;
이렇게 적으시면 IE8,9에서는 '_'가 포함된 CSS 규칙은 무시하기 때문에 위의 규칙으로 표시됩니다.
IE6,7에서는 앞에 '_'가 붙어도 규칙으로 인식하기 때문에 뒤의 규칙을 따라서 한글 글꼴이 먼저 표기된 규칙을 따릅니다.
이렇게 하면, 좀 덜 스트레스 받으며 글씨크기를 조정할 수 있을 것 같네요.
보너스!!
크롬에서는 10px이 가장 작은 글씨 크기인가봅니다.
Firefox에서는 1px까지 표현 잘 됩니다.
[2012-08-02 추가]
IE8에서도 잘 안되네요??? 전에 테스트 했을 때는 잘 됐는데,
그래서 IE8 밑의 브라우저에 핵을 적용하기 위해서
font-family:굴림,Georgia\9;
위처럼 사용하시면 됩니다.
