글꼴 다운로드

* 웹 브라우저의 글꼴 이용

- OS에는 많은 글꼴이 표준으로 들어가 있지만 모두 동일한 글꼴을 갖고 있는 것은 아님.

- 글꼴이 없으면 웹 브라우저는 가능한 한 비슷한 글꼴로 표시하려고 하지만 그래도 환경에 따라서는 다른 분위기로 표시되는 일이 있음.

- CSS3에는 웹 서버로부터 빌요한 글꼴을 다운로드하여 표시할 수 있는 장치가 마련되어 있음.

- 이 글꼴을 '웹 글꼴'이라고 함.

- 이것으로 어떤 환경에서도 거의 똑같은 모양의 글꼴을 나타낼 수 있게 되었음.

- 웹 글꼴의 형식으로는 WOFF(Web Open Font Format, 확장자는 .wof)가 일반적이지만, 이 밖에 TrueType, OpenType, Embedded OpenType, SVG 글꼴도 이용할 수 있음.

- 공개되어 있는 서버의 글꼴을 이용할 때는 라이선스에 주의해야 함.

 

 

* @font-face 규칙

- 서버상의 글꼴을 이용하려면 @font-face 규칙을 사용하여 가상 글꼴을 등록해야 함.

- 등록을 하면 보통의 글꼴과 똑같이 사용할 수 있음.

 

@font-face {

font-family: myfont;                            // 글꼴 집합명

src: url(http://www.cyber.co.kr/font.woff); // 글꼴의 URL : 클라이언트의 로컬 환경에 있는 글꼴의 참조는 'local(글꼴명)'로 함.

}

 

- 글꼴이 SVG 글꼴인 경우는 글꼴 ID를 아래와 같이 지정함.

 

src: url(http://www.cyber.co.kr/font.svg#fontid);

 

- 글꼴을 여러 개 지정하면 맨 앞의 글꼴부터 우선적으로 읽어 들임.

- 아래와 같이 맨 앞에 로컬 글꼴을 지정하면 다시 다운로드하는 것을 피할 수 있음.

 

src: local(font),url(http://www.cyber.co.kr/font.woff);

 

- 글꼴의 적용에 대해서는 보통의 글꼴과 똑같음.

 

div#out{

font-family: myfont;

}

 

 

* 글꼴 기술자 목록

- font-family나 src를 '글꼴 기술자'라고 함.

- 글꼴 기술자에는 이 밖에도 아래와 같은 기술자를 지정할 수 있음.

- 이러한 것들은 글꼴의 특징을 보충할 때 사용됨.

이름	내용
font-family	글꼴이 속한 글꼴의 집합명을 지정
font-style	글꼴이 보통체인지, 이탤릭체인지, 기울임체인지를 지정
font-weight	글꼴의 굵기를 지정
font-stretch	글꼴의 폭의 확대, 축소를 지정
unicode-range	글꼴을 지원하고 있는 문자의 Unicode에서의 범위를 지정
font-variant	글꼴이 특수체인지를 지정. 작은 대문자(소문자 크기의 대문자를 사용하는 서체)만 지정 가능
font-feature-setting	OpenType 포맷에서 태그를 사용하여 글꼴을 지정

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
@font-face	O	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)