[CSS] @font-face unicode-range 한글, 영문, 숫자 다른 전역 폰트 적용하기 global font setting 적용된 폰트 확인하기
날으는쏘피 2022. 11. 23.글을 시작하기에 앞서 @font-face를 설정하려면 웹폰트를 사용하는 것보다 폰트 파일 자체를 프로젝트 내부에 assets으로 저장해서 사용하는 것을 권장한다고 한다.
이와 관련해서 사실 정확한 이유는 잘 모르겠다. 혹시 아시는 분 댓글좀.....
프론트 엔드로 직무 전환을 한 뒤 다양한 프로젝트에 참여해볼 수 있었는데 그중 진짜(!?) 웹 디자이너와 함께 했던 프로젝트는 대부분 폰트가 두가지로 나뉘었다.
- 기본폰트 Noto Sans KR
- 숫자폰트 Roboto
사실 처음에는 기본폰트를 Noto Sans로 설정해두고 숫자 타입이 들어가는 요소들만 Roboto를 설정했는데 사실 only 숫자만 들어가는 요소보다는 주로 'XX개', 'XX,000원', 'XX명' 등 한글과 섞이는 경우가 많고 그렇다고 하나하나 숫자만 따로 묶어서 설정하는 기도 번거롭다.
그러던 중 unicode-range로 특정 문자나 언어를 지정 폰트로 설정하는 방법을 알게됐다.
@font-face 설정
이 방법은 @font-face를 사용하는 것으로 위에서 썼다시피 폰트를 파일으로 프로젝트에 첨부하는 것이 좋다.
아래 코드는 기본 텍스트는 Noto Sans KR, 숫자의 경우 Roboto, 영문의 경우 Noto Sans로 설정한 코드이다
@font-face {
font-family: "Noto Sans KR";
src: url(../fonts/Noto_Sans_KR/NotoSansKR-Regular.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(../fonts/Roboto/Roboto-Regular.ttf) format("truetype");
unicode-range: U+0030-0039; /* Only Number */
font-style: normal;
}
@font-face {
font-family: "Noto Sans";
src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf) format("truetype");
unicode-range: U+0041-005A, U+0061-007A; /* Only English */
font-style: normal;
}
html,
header,
body,
footer,
nav,
input,
select {
font-family: "Noto Sans", "Roboto", "Noto Sans KR", sans-serif;
}
처음에 html이랑 body에만 적용했는데 위에 적어놓은 다른 요소들에 제대로 안먹혀서 추가해줌
font-family의 경우 앞에서부터 순차적으로 적용되기때문에 unicode-range를 설정한 폰트를 먼저 써주고 마지막으로 전체적으로 적용할 폰트를 써준다
자주 쓰는 unicode-range
default : U+0-10FFFF
한글 : U+AC00-D7A3
숫자 : U+003-0039
영문 : U+0041-005A(대문자), U+0061-007A(소문자)
특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
이를 응용하면 특정 문자나 특수문자만 특정 폰트로 지정해서 디자인적인 효과를 줄수도 있을 것 같다.
브라우저에 적용된 폰트 확인하기
실제로 브라우저에 적용된 폰트를 확인하려면 개발자도구에서 computed 탭을 확인하면 된다
- 영문
영문 폰트는 Noto Sans로 설정되어있고
- 한글
한국어 폰트는 Noto Sans KR
- 숫자
숫자를 Roboto로 각각 잘 적용된 것을 확인할 수 있다.
참고
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
'css' 카테고리의 다른 글
[CSS] text ellipsis 한 줄, 여러 줄 말줄임표 한글 줄바꿈 word break (0) | 2023.01.30 |
---|---|
css 테마 스타일 컬러 변수처럼 사용하기 root style variable color (1) | 2022.09.21 |
input type:checkbox 체크박스 커스텀 css디자인 변경하기 (0) | 2021.09.29 |