위 이미지는 현재 제 블로그의 일부분을 브라우져 별로 캡쳐한 것입니다.
보시는 바와 같이 파이어폭스와 크롬에서는 영문 'verdana', 한글 '맑은 고딕'이 정상적으로 출력이 되는데 익스플로러에서는 한글폰트가 출력되지 않습니다.
코드를 살펴보면 본문이 출력되는 .article 부분에 font-size를 추가했을 뿐인데 말이죠...
저 코드를 지우면 '맑은 고딕'으로 정상 출력되는 것으로 봐서 font-size 코드가 문제를 일으키는 것이 아닌가 싶지만 저 코드가 있건 없건 영문폰트는 정상 출력되는 것이 또 이해가 안되네요 ㅎㅎ
고수님들...
/* +++++++++++++++++++++++++++++++++++++++++++++++++
스킨 기본 스타일
+++++++++++++++++++++++++++++++++++++++++++++++++ */
body { font-family: Verdana, 맑은 고딕, Arial, Tahoma, sans-serif, AppleGothic; font-size:0.75em; line-height:1.5; color:#555; background:url(images/bg.png) center top no-repeat #12212D; padding:32px 32px 10px;}
a:link { color:#aaa; text-decoration:none;}
a:visited { color:#aaa; text-decoration:none;}
a:hover { color:#85B8D2; text-decoration:none;}
a:active { color:#555; text-decoration:none;}
hr { display:none;}
h1 { font-size:2.4em; font-family:Verdana, 맑은 고딕;}
h2 { font-size:1.4em;}
h3 { font-size:1.4em;}
h4 { font-size:1.2em;}
h5 { font-size:1.1em;}
h6 { font-size:1em;}
/* ***** Content Part **************************************** */
/* Article Basic Style */
.article { padding-bottom:20px; font-size:13px;}
.article a:link { color:#f60; text-decoration:none;}
.article a:visited { color:#f60; text-decoration:none;}
.article a:hover { color:#f30; text-decoration:underline;}
.article a:active { color:#f60; text-decoration:none;}
.article blockquote { background:url(images/ico_blockquote.gif) top left no-repeat; padding-left:25px; margin:10px 20px;}
.article li { margin-left:25px;}
.article h1 { font-size : 1.5em;}
.article h2 { font-size : 1.4em;}
.article h3 { font-size : 1.3em; margin-top:30px; border:none !important;}
.article h4 { font-size : 1.2em;}
.article h5 { font-size : 1.1em;}
.article h6 { font-size : 1em;}
.article dl { padding:10px;}
.article dt { }
.article dd { margin-left:20px; padding-bottom:10px;}
.article table { border-collapse:separate!important;}
.article hr { display:block; border:1px solid; margin:10px 0;}
