CSS - 영어, 한글 등 다국어/숫자 폰트 동시 적용 방법 2가지

닌니디자인 CSS 썸네일

font-family

하나 이상의 폰트계열 이름이나 일반계열 이름의 우선순위를 지정한다. 폰트계열 이름은 작은따옴표('')나 큰 따옴표("")로 표시해야하며, 일반계열 이름은 따옴표 없이 표시한다. 값은 쉼표로 구분하고 브라우저는 목록에서 설치되었거나 @font-face 규칙을 사용하여 다운로드 할 수 있는 첫번째 글꼴을 선택한다. 우선순위가 높은 것부터 가장 낮은 순으로 폰트 목록을 지정한다. 이러한 특성을 이용하여 영문/숫자, 한글 폰트를 다르게 설정할 수 있다. 

 

적용방법

body {
	font-family: 'helvetica', 'gulim'; /* 반드시 영문/숫자폰트, 한글 폰트 순서로 */
}

check_circle Check

일반적으로 영문폰트의 경우 한글폰트를 지원하지 않기 때문에 영문만 지정한 폰트로 설정한다. 지정하지 않는 언어의 경우 다음 폰트를 확인하므로 영문/숫자는 첫번째 폰트로 나타나고 한글은 두번째 폰트로 나타난다.

 

 

---

 

unicode-range

@font-face 규칙에서 정의된 폰트를 사용할 특정 문자범위를 설정할 수 있다. 유니코드를 이용하여 단일문자, 특정 범위 또는 여러 범위를 포함할 수 있다. 값은 쉼표로 구분하여 여러 범위를 지정할 수 있다. 

 

적용방법

/* 영문, 숫자, 특수문자 */
@font-face {
	font-family: "Apple SD Gothic Neo";
	font-style: normal;
	font-weight: 400;
	unicode-range: U+0020-007E;
}
 
/* 영문대문자, 소문자 */
@font-face {
	font-family: "Apple SD Gothic Neo";
	font-style: normal;
	font-weight: 400;
	unicode-range: U+0041-005A, U+0061-007A;
}
 
/* 숫자 */
@font-face {
	font-family: "Apple SD Gothic Neo";
	font-style: normal;
	font-weight: 400;
	unicode-range: U+0041-005A, U+0061-007A;
}
 
/* 한글 */
@font-face {
	font-family: "gulim";
	font-style: normal;
	font-weight: 400;
	unicode-range: U+AC00-D7A3;
}

 

자주쓰는 유니코드 범위

U+0-10FFFF	기본값
U+0020-007E	영문, 숫자, 특수문자
U+0041-005A	영문 대문자
U+0061-007A	영문 소문자
U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E	특수문자
U+0030-0039	숫자
U+AC00-D7A3	한글
U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF	한글 전체범위(자음, 모음 등)
U+3000-30FF	일본어
U+FF61-FFEF	일본어(반각 가타가나)
U+4E00-9FAF	한중일 통합 한자

 

 

---

 

참고사이트

font-family - CSS: Cascading Style Sheets | MDN

unicode-range - CSS: Cascading Style Sheets | MDN