한글, 영문 폰트 다르게 적용하기

디자인 요구사항 중 한글, 영문 폰트 다르게 적용해 달라는 요청이 들어왔다.

이런경우 한글, 영문 폰트의 @font-face로 unicode-range 적용을 하면된다. 

 

@font-face

텍스트를 표시할 사용자 정의 글꼴을 지정한다.

사용자의 컴퓨터에서 찾을 글꼴 이름을 지정하고
사용자 에이전트가 일치 항목을 찾으면 로컬 글꼴이 사용된다.
그렇지 않으면 url() 함수를 사용하여 지정한 글꼴 리소스를 다운로드하여 사용한다.

 

unicode-range

@font-face 속성 중 unicode-range를 사용하여 특정 폰트를 필터하고 적용할 수있다. 

숫자, 영문폰트, 한글폰트를 유니코드를 이용해 필터할 수 있다. 

 

유니코드란? 

유니코드(Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이며, 유니코드 협회(Unicode Consortium)가 제정한다.

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

전체 U+0020-007E

 

전체적으로 적용할 폰트(NotoSansKR)에는 unicode-range를 기재하지 않고

특정 문자에만 적용할 폰트에만 unicode-range로 font-face선언해준다. 

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/notoSansKR/NotoSans-Bold.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/openSans/OpenSans-SemiBold.woff") format("woff");
  unicode-range: U+0020-007E;
  font-style: normal;
}

 

 

참고 

https://feel5ny.github.io/2019/09/08/CSS_02/