SPACE RUMI

Hi, I am rumi. Let's Splattack!

[IT] 프로덕트 개발/DOM, HTML, CSS - 퍼블리싱

폰트 임베드 하여 사용하기 font-face / 영문, 한글 숫자별로 다른 폰트 지정하기

백루미 2022. 9. 19. 10:22
반응형

@font-face

src에 여러개의 폰트포맷을 작성할 수 있다.
영문, 한글, 숫자 별로 폰트를 다르게 지정하고싶을때는 unicode-range를 추가해준다. 여러개를 추가할때는 , 로 추가한다.
폰트포맷은 웹 최적화 경량폰트인 woff2 or woff 를 사용한다.

@font-face {
  font-family: "Apple SD Gothic Neo";
  src: url("../fonts/AppleSDGothicNeoR.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoR.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Apple SD Gothic Neo";
  src: url("../fonts/AppleSDGothicNeoM.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoM.woff") format("woff");
  font-weight: 500;
  font-style: medium;
}
@font-face {
  font-family: "Apple SD Gothic Neo";
  src: url("../fonts/AppleSDGothicNeoSB.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoSB.woff") format("woff");
  font-weight: 600;
}

@font-face {
  font-family: "Apple SD Gothic Neo";
  src: url("../fonts/AppleSDGothicNeoB.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoB.woff") format("woff");
  font-weight: 700;
  font-style: bold;
  unicode-range: U+0041-005A, U+0061-007A;
}
전체 : U+0020-007E
한글 : U+AC00-D7A3 
영어 대문자 : U+0041-005A 
영어 소문자 : U+0061-007A
숫자 : U+0030-0039
특수 문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

 

반응형