웹 폰트 한글, 영어, 숫자 다른 폰트 적용방법 · unicode-range

unicode-range 활용

웹 디자인에서 다양한 언어와 문자에 적합한 폰트를 적용하는 것은 사용자 경험을 향상하는 중요한 요소입니다. 이 글에서는 CSS의 unicode-range 속성을 사용하여 한글, 영어, 숫자에 각각 다른 폰트를 적용하는 방법을 설명하겠습니다.

unicode-range란

unicode-range는 CSS 디스크립터로, @font-face로 정의된 폰트를 특정 문자 범위에 적용할 수 있도록 설정합니다. 이를 통해 언어별로 적합한 폰트를 선택적으로 사용할 수 있습니다.

유니코드 범위 예시

다음은 다양한 문자 범위를 나타내는 유니코드 예시입니다.

• 기본값: U+0-10FFFF (모든 글자에 적용)
• 영문, 숫자, 특수문자: U+0020-007E
• 영문 대문자: U+0041-005A
• 영문 소문자: U+0061-007A
• 특수문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
• 숫자: U+0030-0039
• 한글: U+AC00-D7A3
• 일본어: U+3000-30FF
• 한·중·일 통합 한자: U+4E00-9FAF

이 유니코드 범위를 참고하여 필요한 부분을 설정할 수 있습니다.

CSS 코드 예시

아래는 특정 언어에 맞는 폰트를 적용하기 위한 CSS 코드입니다.

/* 기본 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 코드를 사용하면, 각 언어와 문자 범위에 맞는 폰트를 손쉽게 적용할 수 있습니다. 이렇게 설정하면 사용자에게 보다 일관된 디자인과 가독성을 제공할 수 있습니다.

마무리

unicode-range 속성을 활용하면 웹사이트에서 다양한 언어와 문자에 대해 적절한 폰트를 적용할 수 있습니다. 이를 통해 사용자 경험을 향상하고, 디자인의 통일성을 유지할 수 있습니다. 다양한 폰트를 활용하여 나만의 스타일을 표현해 보세요. 추가적인 질문이 있으시면 언제든지 문의해 주시기 바랍니다.