반응형
unicode-range는 CSS 디스크립터(discriptor)로써,
@font-face로 정의된 폰트를 특정 character의 범위를 지정해 줄 수 있습니다.
/* unicode-range */
unicode-range: U+0-10FFFF; // 기본값, 모든 글에 적용
unicode-range: U+0020-007E; // 영문, 숫자, 특수문자 적용
unicode-range: U+0041-005A; // 영문 대문자
unicode-range: U+0061-007A; // 영문 소문자
unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E; // 특수문자 범위
unicode-range: U+0030-0039; // 숫자 범위
unicode-range: U+AC00-D7A3; // 한글 범위
unicode-range: U+3000-30FF; // 일본어 범위
unicode-range: U+3000-30FF, U+FF61-FFEF; // 일본 문자 범위(반각 가타카나 포함)
unicode-range: U+4E00-9FAF; // 한·중·일 통합 한자 범위
위에 있는 유니코드 범위를 확인하시고 필요하신 부분을 사용하시면 됩니다.
/* Helvetica Neue 폰트 */
@font-face {
font-family: Helvetica;
src: url(Helvetica Neue.woff);
/* unicode-range를 설정하지 않으면 모든 범위에 적용됨 */
}
/* 일본어 */
@font-face {
font-family: Helvetica;
src: url(Helvetica Neue Japanese.woff);
unicode-range: U+3000-30FF, U+FF61-FFEF;
}
/* 라틴, 그리스, 키릴 문자 및 특수문자 */
@font-face {
font-family: Helvetica;
src: url(Helvetica Neue.woff);
unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}
body { font-family: Helvetica; }
CSS 코드를 보시면 사용방법이 간단하게 표현되어 있습니다.
다양하게 자신이 원하는 폰트를 사용하시기 바랍니다.
반응형