폰트를 한글과 영어,숫자 따로 적용하기 (feat. unicode-range)
2022. 5. 4. 11:19ㆍStudy/Publishing
유니코드 범위
- 영문 (대문자) : U+0041-005A
- 영문 (소문자) : U+0061-007A
- 숫자 : U+0030-0039
- 한글 : U+AC00-U+D7A3
- 특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
- 전체 : U+0020-007E
@font-face
body {font-family:'Roboto' ,'Noto Sans KR', 'sans-serif';}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('※'),
url('../fonts/Roboto-Regular.eot'),
url('../fonts/Roboto-Regular.eot#iefix') format('embedded-opentype')
url('../fonts/Roboto-Regular.woff') format('woff'),
url('../fonts/Roboto-Regular.otf') format('opentype'),
url('../fonts/Roboto-Regular.ttf') format('truetype');
unicode-range:U+0041-005A, U+0061-007A, U+0030-0039;
}
@font-face {
font-family: 'ChosunCentennial';
src: url(../fonts/ChosunCentennial/ChosunCentennial.eot);
src: url(../fonts/ChosunCentennial/ChosunCentennial.eot?#iefix) format('embedded-opentype'),
url(../fonts/ChosunCentennial/ChosunCentennial.woff) format('woff'),
url(../fonts/ChosunCentennial/ChosunCentennial.ttf) format('truetype');
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: 'OpenSans';
src: url(../fonts/OpenSans/OpenSans-Regular.eot);
src: url(../fonts/OpenSans/OpenSans-Regular.eot?#iefix) format('embedded-opentype'),
url(../fonts/OpenSans/OpenSans-Regular.woff) format('woff'),
url(../fonts/OpenSans/OpenSans-Regular.ttf) format('truetype');
unicode-range: U+26;
}
body {
font-size: 35px;
font-family: 'ChosunCentennial', 'OpenSans';
}
* {
font-family: inherit;
}
참고:)
폰트를 한글과 영어,숫자 따로 적용하기 (feat. unicode-range)
참조1: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range 참조2: https://www.fileformat.info/info/unicode/char/26/index.htm 유니코드문자표: https://ko.wikipedia.org/wiki/%EC%..
wazacs.tistory.com
https://youngkeol.tistory.com/92
언어별 다른 폰트로 적용하는 방법
모든 폰트가 "Noto Sans KR"에서 영문과 숫자만 "Roboto"로 바꿔야 하는 경우가 있었습니다. 클래스를 따로 만들지 않고 @font-face에서 unicode-range을 이용하여 폰트를 변경했습니다. unicode-range는 특정 범.
youngkeol.tistory.com
https://jineecode.tistory.com/104
@font-face unicode-range 사용법
나는 보통 css로 폰트 스타일을 줄 때 @import url ( ~ ) 을 하여 body {font-family: ~ 를 적용하지만 한글과 영어에 다른 폰트를 적용하고 싶을 때 몹시 일이 번거로워진다. 퍼블리싱을 하면서 해당 컨텐츠
jineecode.tistory.com
'Study > Publishing' 카테고리의 다른 글
| input type number를 비밀번호로 표시하기, 모바일 숫자키패드 (0) | 2022.08.17 |
|---|---|
| CSS 방법론 - BEM (0) | 2022.05.09 |
| HTML include (0) | 2022.05.03 |
| input 태그의 pattern 속성과 정규표현식 (0) | 2022.05.02 |
| 세로쓰기 모드 writing-mode, 글자 타이핑 효과 (0) | 2022.03.18 |
