[CSS] 웹 폰트 속성

속성

속성	설명
font-family	사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋다.
src	url에 폰트 파일의 경로를 설정하고,format에 폰트 파일의 형식을 설정한다.
font-style	normal / italic 설정
font-weight	보통 100~400 가는 굵기, 500~600 중간 굵기, 700~900 두꺼운 굵기로 표시된다. "normal = 400"으로 중간 굵기, "bold = 700"으로 두꺼운 굵기로 표시한다.

 

함수

함수	설명
local()	서버에서 다운을 받지 않고, 사용자의 컴퓨터에 "NanumBarunGothic"이 있으면, 컴퓨터에 있는 폰트를 사용하라는 것
format()	글꼴 리소스가 어떤 형식인지에 대한 힌트를 브라우저에 제공하여 적합한 것을 선택할 수 있도록 format () 함수 내에 형식 유형을 포함 할 수 있다.

 

파일 종류

[요약]

- .eot는 IE6~8까지 사용하지만 버그가 있기 때문에 .eot?#iefix를 함께 사용한다.

- woff는 IE9이상 + 모든 브라우저에서 사용할 수 있다.

- woff2는 IE를 제외한 모든 브라우저에서 사용할 수 있다.

파일 종류	설명
.eot	IE의 경우: Internet Explorer 6 ~ 8에서 EOT 형식만 사용할 수 있다.
.eot?#iefix	IE6~8까지의 브라우저에 있는 버그때문에 필요합니다.
.oft	Open Type Font 3차원 베지어 곡선을 사용한다. (그래서 계산과정이 복잡) 모든 OS에서 사용가능하다. TTF보다 속도가 느리지만, TTF보다 섬세한 작업이 가능하다. 가족체(라이트, 볼드, 이탤릭)를 하나의 파일로 묶을 수 있다. 주로 그래픽 디자인 출력에 사용된다.
.ttf	True Type Font 2차원 베지어 곡선을 사용한다. 모든 응용 소프트웨어에서 사용가능하다. OTF보다 속도가 빠른편이다. 가족체(라이트, 볼드, 이탤릭)를 다른 파일 취급한다. 주로 문서 작업에 사용된다.
.woff	Web Open Font Format으로 웹 브라우저에서 로드가 된다.
.woff2	폰트 형식에서 WOFF(Web Open Font Format) 형식과 WOFF 2.0 형식(이하 WOFF2 형식)은 압축된 폰트 형식이다. 같은 계열에 속하는 WOFF 형식과 WOFF2 형식에서는 WOFF2 형식이 30~50% 더 압축된 형식이다. WOFF2 형식은 Internet Explorer를 제외한 모든 브라우저에서 사용할 수 있다. 그러므로 Internet Explorer에서는 WOFF 형식을, 나머지 브라우저에서는 WOFF2 형식을 사용하도록 해서 폰트의 용량을 줄일 수 있다.