[css] 한글, 영어 숫자 언어별 다른 폰트, css 다르게 적용 방법

unicode-range란?

@font-face로 정의된 폰트를 특정 character의 범위를 지정해줄 수 있다. 딱 한 단어에 속하는 유니코드도 지정해 줄 수 있다. 예를 들어 U+26(U+0026) 같은 경우는 특수 문자 '&'를 나타내는데, 이를 unicode-range에 지정해 준다면, &만 @font-face로 정의된 폰트가 적용된다.

 

사용  예시 css 코드

/* Apple SD Gothic Neo */
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-style: normal;
	font-weight: 400;
	src: url(../font/AppleSDGothicNeoR.woff2) format("woff2");
	unicode-range: U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-style: normal;
	font-weight: 300;
	src: url(../font/AppleSDGothicNeoL.woff2) format("woff2");
	unicode-range: U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF
}

/* Poppins */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	src: url(../font/Poppins-ExtraBold.woff2);
	unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url(../font/Poppins-Bold.woff2);
	unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}

 

자주 사용할 만한 유니코드 범위

• 한글 범위: U+AC00-D7A3
• 영어 대문자 범위 : U+0041-005A
• 영어 소문자 범위 : U+0061-007A
• 숫자 범위 : U+0030-0039
• 특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

 

한글 전체 적용 유니코드 범위
unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;