웹 폰트는 웹 디자이너들에게 유저의 컴퓨터에 설치되지않은 폰트들을 사용가능하게 한다
외부 폰트는 @font-face 규약으로 정의된다.
@font-face는
크롬 4.0 이상, 익스플로러 9.0 이상, 파이어폭스 3.5 이상, 사파리 3.2 이상, 오페라 10.0 이상의 버전에서 지원한다
폰트 포맷들
TrueType Fonts (TTF)
TTF는 폰트 표준으로써 1980년대 후반에 애플과 마이크로소프트에 의해 개발되었다 TTF는 맥 과 마이크로소프트 OS 에서 가장 흔한 폰트 포맷이다.
OpenType Fonts (OTF)
OTF는 확장,축소 가능한 컴퓨터 폰트이다. TTF 를 바탕으로 하고있으며 마이크로소프트의 상표가 등록되어있다. OTF는 오늘날의 주요 컴퓨터 플랫폼에서 흔히 사용된다.
The Web Open Font Format (WOFF)
WOFF는 웹페이지에서 사용하기위한 폰트이다. 2009년에 개발되었으며 현재 W3C에서 권고되는 폰트포맷이다.
WOFF는 OTF,TTF 의 압축포맷에서 메타데이터가 추가된 포맷이다.
The Web Open Font Format (WOFF 2.0)
WOFF 1.0 보다 효율성 높은 압축알고리즘을 사용하는 포맷이다.
SVG Fonts/Shapes
SVG(scalable vector graphics:가변 벡터 도형처리) 폰트는 상형문자를 사용가능하게 한다. SVG 1.1 API에는 SVG 문서내에서 폰트를 만들 수 있는 폰트모듈이 정의되어있다. SVG 문서에 CSS또한 적용가능하며 @font-face 규약도 텍스트로 SVC문서에 적용될 수 있다.
Embedded Open Type Fonts (EOT)
EOT 폰트는 OTF 의 컴팩트 형태로 마이크로소프트가 웹페이지에서 포함되는 글꼴로 사용하기위해 설계하였다.
브라우저들의 폰트 포맷 지원
*IE: The font format only works when set to be "installable".
*Firefox: Not supported by default, but can be enabled (need to set a flag to "true" to use WOFF2).
원하는 폰트를 사용하기
CSS3 @font-face 규약은 가장먼저 폰트이름을 정의하고 그다음 폰트파일의 주소를 설정한다.
Tip: url은 항상 소문자여야한다. 대문자는 IE에서 예기치않은 결과들을 발생시킬수 있다.
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
@font-face 에서 정의한 myFirstFont 를 각 엘리먼트의 폰트로 적용시킬수 있다.
@font-face 는 여러번 정의 될 수 있다. 또한, 같은 폰트이름도 폰트변화에 따라 다른 폰트포맷을 사용하도록 커스텀이 가능하다.
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
(font-weight: normal;)
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: myFirstFont;
}
@font-face를 두번 정의하고 같은 font-family 이름을 사용하였다. 첫번째 구문에서 font-weight 가 생략되었지만 default로 normal이 지정되어있는데, 이는 myFirstFont의 일반 폰트 형식에서 사용하는 폰트를 정의한 것이고,
두번째 정의구문에서는 myFirstFont를 적용한 폰트가 bold(e.g <b></b>) 타입을 취할때 나타낼 폰트를 정의한 것이다.
즉 두번째 정의구문은 myFirstFont의 bold 옵션 이라고 할 수 있겠다.
@font-face 의 속성들
