ExtJS 와 브라우저 한글 폰트의 관계
WEB2.0/ExtJS |
2008. 11. 13. 22:03
ExtJS 에 기본적으로 포함되어 있는 css 에는 한글 폰트를 고려하고 있지 않다.
기본 css 에는 Tahoma 가 주로 제1 서체로 지정되어 있는데 사용하는 크기는 대부분 12px과 11px 이다.
IE 의 경우 Tahoma 가 서체로 지정되어 있는경우 한글 서체는 굴림이 사용되는데 이때 문제가 발생한다.
한글의 경우 12px 이나 11px 이나 똑같은 크기로 표시 된다는 것!!!
만약 IE 로 이 포스팅을 보고 있다면 아래 두 라인에 한글부분은 차이가 없을 것이다.
그래서 발생하는 대표적인 문제는 Tab Panel 의 Tab 에 영문으로만 이루어진 탭과 한글 또는 한글영문 혼합으로 이루이진 탭이 공존하면 높낮이가 깨져 버린다.
기본 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;}
'WEB2.0 > ExtJS' 카테고리의 다른 글
| [ExtJS] 그리드나 트리에서 스크롤링 포커스 주기. (0) | 2008.12.30 |
|---|---|
| [javascript] Delete 연산자 - 배열의 원소 지우기 (0) | 2008.12.01 |
| [javascript] typeof 연산자 (0) | 2008.12.01 |
| ExtJS에서 Mask적용하기 (0) | 2008.11.21 |
| ExtJS 사용시 툴바 또는 버튼에 링크점선 없애기. (0) | 2008.11.13 |
