반응형
@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
반응형
'[IT] 프로덕트 개발 > DOM, HTML, CSS - 퍼블리싱' 카테고리의 다른 글
www.youtube.com에서 연결을 거부했습니다. HTML에 유튜브 영상 넣기, 영상 자동재생, 비디오 영상 넣기 (3) | 2023.07.05 |
---|---|
@mixin을 사용하여 min, max width를 지정해주는 클래스를 만들자 (1) | 2022.09.20 |
Color 변수화하기 / css color 사전 정의하기 (1) | 2022.09.06 |
자주 사용하는 인라인 클래스, base class 만들기 (1) | 2022.09.02 |
reset css / CSS 초기화하기 (2) | 2022.09.01 |