ExtJS 와 브라우저 한글 폰트의 관계

ExtJS 에 기본적으로 포함되어 있는 css 에는 한글 폰트를 고려하고 있지 않다.
기본 css 에는 Tahoma 가 주로 제1 서체로 지정되어 있는데 사용하는 크기는 대부분 12px과 11px 이다.

IE 의 경우 Tahoma 가 서체로 지정되어 있는경우 한글 서체는 굴림이 사용되는데 이때 문제가 발생한다.
한글의 경우 12px 이나 11px 이나 똑같은 크기로 표시 된다는 것!!!

만약 IE 로 이 포스팅을 보고 있다면 아래 두 라인에 한글부분은 차이가 없을 것이다.

font:normal 11px tahoma

Abcd 한글 123

font:normal 12px tahoma

Abcd 한글 123

그래서 발생하는 대표적인 문제는 Tab Panel 의 Tab 에 영문으로만 이루어진 탭과 한글 또는 한글영문 혼합으로 이루이진 탭이 공존하면 높낮이가 깨져 버린다.

 

 

자세히 보면 탭 아래 공간이 비어 있는것을 볼 수 있다. 탭을 선택 하더라도 깨져서 표현이 된다.
반면에 IE 를 제외한 ExtJS 호환 브라우져 에서는 굴림체를 11px로 표시함으로서 위와 같은 문제가 발생하지 않는다.

해결방법은??
11px 이 사용되는 부분의 폰트를 아래와 같이 굴림으로 명확히 지정해 주면 된다.

font:normal 11px gulim

또는 아래의 코드로 IE 의 탭 관련 css 를 재정의 한다.

.ext-ie .x-tab-strip span.x-tab-strip-text {    font: 11px Gulim, Tahoma;}