unicode-range 속성의 이해

unicode-range 속성은 @font-face 규칙으로
로드되는 글꼴의 특정 문자 범위를 지정합니다.

이 속성을 사용하면 브라우저가 글꼴 파일을 다운로드할 때 필요한 문자 파일만을 다운로드하기 때문에 화면에 빠르게 렌더링할 수 있습니다.

알아두세요!
@font-face 규칙을 사용하여 웹 페이지에 사용자 정의 글꼴을 적용한 글꼴을 일반적으로 '웹 폰트'라고 부릅니다.
웹 폰트는 사용자 디바이스에 설치된 글꼴(일반적으로 '시스템 폰트')이 아닌, 웹사이트에서 제공하는 글꼴 파일을 불러와 브라우저가 렌더링할 수 있도록 고안된 폰트로 다른 폰트와 구별해서 사용하는 용어입니다.
unicode-range 속성은 '시스템 폰트'가 아닌 '웹 폰트'에만 적용됩니다.

CSS 
/* @font-face 규칙을 통해
   웹에 호스팅된 "Nanum Gothic" 글꼴을 로드하고,
   한글 음절에 해당하는 유니코드 범위만 사용하도록 설정합니다. */
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"), /* 사용자 디바이스에 설치된 글꼴 */
         url("fonts/NanumBarunGothic.woff2") format("woff2"); /* 호스팅된 글꼴 */
    unicode-range: U+AC00-D7A3; /* 한글을 포함하는 범위만 다운로드해서 사용 */
}

/* 위에서 정의한 "Nanum Gothic" 글꼴을 body 태그에 적용합니다.
   만약 'Nanum Gothic' 글꼴이 로드되지 않으면 sans-serif 계열의 폰트로 대체합니다. */
body {
    font-family: "Nanum Gothic", sans-serif;
}

이 속성은 @font-face규칙에서만 사용할 수 있는 설명자(descriptor)입니다. 선택자의 속성으로는 사용할 수 없습니다.

CSS 
selector {
    font-family: "Nanum Gothic";
    unicode-range: U+AC00-D7A3; /* 선택자의 속성으로는 사용할 수 없습니다. */
}

특정 문자 범위의 이해

unicode-range 속성을 이해하는 데 가장 중요한 것은 특정 문자 범위입니다.
이 속성은 웹 폰트가 적용될 문자들을 제한함으로써, 브라우저가 필요할 때만 해당 폰트를 다운로드하도록 합니다.

unicode(유니코드 , 공식 명칭 The Unicode Standard)

컴퓨터는 문자를 숫자로 인식합니다. 이러한 숫자들을 표준화한 시스템이 바로 unicode(유니코드)입니다.
유니코드는 전 세계의 다양한 문자를 고유한 숫자( '코드 포인트' 라고 함)로 매핑해서 관리합니다. 예를 들어, 한글의 첫 글자인 가는 U+AC00이라는 유니코드 번호('코드 포인트 번호)로 지정되어 있습니다. 각 문자에 부여된 유니코드 번호는 정해진 규칙과 표준에 따라 규격화됩니다. 예를 들어, 한글 음절은 U+AC00에서 U+D7A3까지의 범위로 규격화되어 있습니다.

유니코드는 모든 언어의 문자와 기호를 포함하며, 이를 통해 다양한 언어의 텍스트를 일관되게 표현하고 처리할 수 있습니다.

규격화된 문자 범위

언어별, 숫자, 특수문자 등에는 유니코드 번호의 범위가 규격화되어 있습니다.

unicode-range 속성은
이러한 유니코드의 규격화된 문자 범위를 활용하여 브라우저가 글꼴 파일을 다운로드할 때 필요한 범위의 문자 파일만 다운로드하도록 할 수 있습니다. 이렇게 하면, 글꼴의 모든 문자 파일을 다운로드하지 않고 필요한 문자 파일만 다운로드되므로 화면에 빠르게 렌더링할 수 있습니다.

유니코드 번호 범위에 대한 참조 자료입니다.

사용 목적

unicode-range 속성을 사용하는 목적은 글꼴에 포함되어 있는 문자 파일 리소스를 필요한 파일로만 분할하여 브라우저가 다운로드하도록 하는 것입니다. 브라우저가 글꼴 파일을 다운로드할 때 필요한 문자 파일만을 다운로드하기 때문에 화면에 빠르게 렌더링할 수 있습니다.

형식 구문

CSS 
unicode-range: <unicode-range>;

구문

CSS 
/* <unicode-range> 값 예시 */
unicode-range: U+26; /* 단일 코드 포인트 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* 코드 포인트 범위 */
unicode-range: U+4??; /* 와일드카드 범위 */
unicode-range: U+0025-00FF, U+4??; /* 여러 값 지정 */

값

다음의 각 <unicode-range> 값은 U+ 또는 u+ 접두사로 시작하며, 그 뒤에 아래 나열된 세 가지 형태 중 하나의 코드 포인트 범위가 옵니다. 이러한 형태 중 하나에 맞지 않는 범위는 유효하지 않으며 선언이 무시됩니다.

unicode-range 속성의 값
단일 코드 포인트 단일 유니코드 문자 코드 포인트를 의미합니다.
예를 들어, U+26은 특정 문자 하나만을 포함합니다.
코드 포인트 범위 유니코드 코드 포인트의 범위를 지정합니다. 범위를 시작하는 코드 포인드와 범위를 끝내는 코드 포인트 사이에 하이픈(-) 기호를 추가합니다.
예를 들어, U+0025-00FF는 U+0025에서 U+00FF까지의 모든 문자를 포함합니다.
와일드카드 범위 와일드카드 문자인 ?를 사용하여 해당하는 범위(예: U+???)에 표시함으로써 코드 포인트의 범위를 지정합니다.
예를 들어, U+4??는 U+400에서 U+4FF까지의 모든 문자를 포함합니다.

유용한 유니코드 번호의 범위

다음의 표는 활용도가 많은 유용한 유니코드 번호의 범위입니다.

유용한 유니코드 번호의 범위
범주 유니코드 범위 설명 예시 코드
한글 U+AC00 ~ U+D7A3 모든 한글 음절 unicode-range: U+AC00-D7A3;
영문 알파벳 U+0041 ~ U+007A 대문자 A ~ 소문자 z unicode-range: U+0041-007A;
숫자 U+0030 ~ U+0039 아라비아 숫자 0 ~ 9 unicode-range: U+0030-0039;
특수문자 U+0021 ~ U+007E 다양한 기호 및 특수 문자
(예: !, @, #, $ 등)		 unicode-range: U+0021-007E;

여러 값 지정하기

unicode-range 속성은 여러 개의 문자 범위를 한꺼번에 지정할 수 있습니다. 이를 통해 브라우저가 특정 문자 집합만 다운로드하도록 제한할 수 있습니다. 여러 값은 쉼표(,)로 구분하여 값을 나열하면 됩니다.

CSS 
/* 여러 값 지정 */
unicode-range: U+AC00-D7A3, U+0041-007A, U+0030-0039; /* 한글, 영문 알파벳, 숫자 */

형식 정의

unicode-range 속성의 형식 정의
초깃값 U+0-10FFFF
(유니코드의 전체 범위, 즉 해당 글꼴을 모든 문자)
적용 @ 규칙 @font-face

예제

활용도가 많은 특정 문자 범위 내에서 사용하는 예제입니다.

한글

CSS 
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2"); 
    unicode-range: U+AC00-D7A3;
}

영문 알파벳

CSS 
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2"); 
    unicode-range: U+0041-007A;
}

숫자

CSS 
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2"); 
    unicode-range: U+0030-0039;
}

특수문자

CSS 
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2"); 
    unicode-range: U+0021-007E;
}

한글과 숫자

CSS 
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2"); 
    unicode-range: U+AC00-D7A3, U+0030-0039;
}

한글과 영문과 숫자

CSS 
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2"); 
    unicode-range: U+AC00-D7A3, U+0041-007A, U+0030-0039;
}

브라우저 호환성

unicode-range 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
unicode-range 1 12 36 3.1

명세서

unicode-range 속성의 명세서 사양
명세서 사양
unicode-range CSS Fonts Module Level 4
#unicode-range-desc

참고문헌

같이 보기