영문,한글 폰트 적용하기
Posted by Albert 3641Day 11Hour 51Min 40Sec ago [2014-05-30]
CSS에서 폰트를 지정할 때 한글 글꼴이 영문 글꼴 보다 먼저 정의되면 한글과 영문 모두 한글 글꼴로 표시됩니다. 아래는 가장 많이 사용되는 폰트 지정 방법의 예입니다.
1 2 3 | body { font-family: 돋움, Tahoma, Geneva, sans-serif; } |
일반적으로 한글 폰트 안에 포함되어 있는 영문 폰트는 단일 영문 폰트에 비해 상대적으로 디자인 완성도가 낮습니다. 그래서 한글에만 한글 폰트를 적용하고, 영문과 숫자는 영문 폰트를 적용하는 방법이 필요합니다.
한글은 ‘돋움’을 적용하고, 영문과 숫자는 ‘Tahoma’를 적용해 보겠습니다.
CSS
1 2 3 | body { font-family: Tahoma, 돋움, Geneva, sans-serif; } |
간단하죠? 영문 글꼴이 한글 글꼴 보다 먼저 정의되면 영문은 지정한 영문 글꼴로 나오고, 한글은 지정한 한글로 표시됩니다.
하지만 항상 그렇듯 우리의 IE6와 IE7을 달래주어야 합니다. 한글과 영문의 글꼴이 다르게 표현할 경우 IE6와 IE7에서는 폰트 사이즈가 제대로 적용되지 않는 문제가 있습니다. 이 때문에 속성 앞에 _를 붙여 IE8 이후 버전에서는 해당 속성을 무시하게 하고, IE7 이전 버전에만 적용되는 CSS 핵을 이용해야 합니다.
1 2 3 4 | body { font-family: Tahoma, 돋움, Geneva, sans-serif; _font-family: 돋움, Tahoma, Geneva, sans-serif; } |
이렇게 하면 IE7 이전에서는 한글과 영문 모두 ‘돋움’으로 표시되고, 그 외의 브라우저에서는 한글은 ‘돋움’, 영문은 ‘Tahoma’로 표시됩니다. (물론 돋움과 Tahoma가 기본 설치되어 있는 Windows에서만…)
출처:http://dinoegg.co.kr/_font-family/