작업을 하다 보면 한글을 나눔고딕, 영문/숫자는 OpenSans 이런식으로 서로 다르게 폰트를 설정해주어야 할떄가 있다.
아무것도 모르던 시절에는 각 클래스에 font를 다르게 적용시켰는데, 정말 쉬운 방법으로 unicode-range를 알게 되었다.
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;
📚 DevLog