web font
@font-face
웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다.
IE6~8 지원해야 할 경우 eot요청해서 woff 보다 먼저 화면에 표시하기
- font-family : 원하는 글꼴 이름 선언
- local(※) : 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다.
- font-weight : 굵기 설정 (보통 서체에서 굵기가 들어가있기 때문에 normal 추천)
- font-style : Serif, Sans-Serif, italic 등
@font-face {
font-family: AppleSDGothicNeoB;
src: local(※), url("/assets/font/AppleSDGothicNeoB.eot") format("eot"),
src: local(※), url("/assets/font/AppleSDGothicNeoB.woff2") format("woff2"),
src: local(※), url("/assets/font/AppleSDGothicNeoB.woff") format("woff"),
src: local(※), url("/assets/font/AppleSDGothicNeoB.woff") format("woff2");
font-weight: normal;
font-style: normal;
}
font-family
쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 사용하고자 하는 폰트를 맨 앞에 우선으로 적용시킵니다.
body { font-family: 'AppleSDGothicNeoL', 'Arial', 'Helvetica', 'sans-serif'; }
font type
- EOT(Embedded Open Type) : IE에서만 사용
- TrueType과 OpenType : .ttf(TrueType format)와 .otf(OpenType format) 서체 파일들이 보일 것입니다. 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식입니다. 웹 페이지 뿐만 아니라, 워드 프로세싱이나 전자출판에도 사용할 수 있습니다. 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함
- WOFF(Web Open Font Format): 웹을 대상으로 설계된 파일 형식. 다양한 브라우저 제조사의 지지도 받고 있어서 IE9 를 비롯한 모던 브라우저와 iOS 사파리(5+)에서 지원하고 있습니다. 하지만 안드로이드 진영에서 이 파일을 지원하지 않고 있어서 안드로이드 기기나 IE8 사용자는 서체를 다운받거나 표시할 수 없습니다.
- WOFF2 : 압축된 폰트 형식이다. 같은 계열에 속하는 WOFF 형식과 WOFF2 형식에서는 WOFF2 형식이 30~50% 더 압축된 형식이다.
- SVG(Scalable Vector Graphic): iOS 사파라 4.1 이전 버전에서 인식하는 유일한 웹 폰트 타입. (사용권장 x)
