끄적이는 퍼블리셔♥

[CSS] 폰트 한글, 영문 각각 다르게 적용하기 본문

홀로 공부/HTML, CSS

[CSS] 폰트 한글, 영문 각각 다르게 적용하기

TargetA 2023. 5. 30. 08:44 
@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/notoSansKR/NotoSans-Bold.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  src: url("../fonts/openSans/OpenSans-SemiBold.woff") format("woff");
  unicode-range: U+0020-007E;
  font-style: normal;
}

body {
    font-family: 'NotoSansKR', 'OpenSans';
}

 
font-face에 unicode-range 속성을 사용하면 된다.
unicode-range는 특정 범위가 글꼴만 불러와 사용할 수 있도록 설정하는 방법이다.
 
 

  • 영문 (대문자) : U+0041-005A
  • 영문 (소문자) : U+0061-007A
  • 숫자 : U+0030-0039
  • 한글 : U+AC00-U+D7A3

 

'홀로 공부 > HTML, CSS' 카테고리의 다른 글

[HTML] HTML이란? (Hyper Text Markup Language)  (0) 2023.05.30
[CSS] 퍼블할때 많이 쓰는 폰트(한글, 영문)  (0) 2023.05.30
[HTML, CSS] input 커스텀하기  (0) 2023.05.25
[CSS]z-index 안먹을때, 제대로 사용법  (0) 2023.05.23
[HTML, CSS] display 속성들 헷갈리는거 정리(인라인, 블록, 인라인블록 요소...)  (0) 2023.05.22
'홀로 공부/HTML, CSS' Related Articles more