폰트를 한글과 영어,숫자 따로 적용하기 (feat. unicode-range)

참조1: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
참조2: https://www.fileformat.info/info/unicode/char/26/index.htm

유니코드문자표: https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_2000~2FFF

 

프로젝트를 하다 보면 이런 경우가 있습니다. 

한글을 나눔고딕으로 해주시고, 영문,숫자는 OpensSans로 해주세요!

 

아무것도 모르던 시절에는 숫자마다 클래스를 주어 font를 다르게 적용시켰습니다.

하지만 정말 쉬운 방법이 있었더리구요!

바로 unicode-range를 지정하는 방법입니다. 

 

unicode-range 는 CSS 디스크립터(discriptor)로써, 
@font-face로 정의된 폰트를 특정 character의 범위를 지정해줄 수 있습니다. 

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

범위를 지정하고싶다면, U+0025-00FF이런식으로 - 를 통해 start-end를 지정해 줄 수 있습니다. 
여기서는 U+0025 부터 U+00FF 까지를 의미하는걸로 보아 - 이후에 오는 유니코드에는 U+를 생략 하는걸로 보입니다. 

 

예를들어보겠습니다. 

확연한 차이를 위해 한글폰트를 조선체로 해보겠습니다.

 

<p>안녕하세요 나&&&&너</p>

@font-face {
    font-family: 'ChosunCentennial';
    src: url(../fonts/ChosunCentennial/ChosunCentennial.eot);
    src: url(../fonts/ChosunCentennial/ChosunCentennial.eot?#iefix) format('embedded-opentype'),
         url(../fonts/ChosunCentennial/ChosunCentennial.woff) format('woff'),
         url(../fonts/ChosunCentennial/ChosunCentennial.ttf) format('truetype');
         unicode-range: U+AC00-D7A3;
        }

@font-face {
    font-family: 'OpenSans';
    src: url(../fonts/OpenSans/OpenSans-Regular.eot);
    src: url(../fonts/OpenSans/OpenSans-Regular.eot?#iefix) format('embedded-opentype'),
         url(../fonts/OpenSans/OpenSans-Regular.woff) format('woff'),
         url(../fonts/OpenSans/OpenSans-Regular.ttf) format('truetype');
         unicode-range: U+26;
}


body {
    font-size: 35px;
    font-family: 'ChosunCentennial', 'OpenSans';
}

* {
    font-family: inherit;
}

이렇게 해주면 한글(U+AC00-D7A3)은 ChosunCentennial체가 적용되고, 

특수기호 &(U+26)만 OpenSans로 적용됩니다. 

결과화면

 

 

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

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

 

위의 코드를 활용하여 다양하게 범위를 지정하여 폰트를 줄 수 있다!