CSS 입문 | CSS3 모듈 | CSS3 웹 글꼴

CSS3 웹 글꼴

CSS3에서는 웹 글꼴을 사용하여 사용자의 컴퓨터에 설치되어 있지 않은 글꼴까지 사용할 수 있게 해준다.

CSS3에서는 웹 글꼴을 위해 다음 규칙이 추가되었다.

• @font-face 규칙

CSS2 글꼴

CSS2까지는 다음과 같은 font 속성만을 사용할 수 있었다.

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size

CSS3 웹 글꼴(web font) 지원 버전

CSS3 웹 글꼴(web font)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

웹 글꼴의 형식

웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같다.

1. 트루 타입 글꼴(TrueType Fonts, TTF)
2. 오픈 타입 글꼴(OpenType Fonts, OTF)
3. 웹 오픈 글꼴(The Web Open Font Format, WOFF)
4. 웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)
5. SVG 글꼴(SVG Fonts/Shapes)
6. 임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT) 트루 타입 글꼴(TrueType Fonts, TTF)

트루 타입 글꼴은 Apple과 Microsoft가 공동으로 개발한 외곽선 글꼴 표준이다.
이 글꼴은 맥(MAC)과 윈도우(Window) 운영체제에서 가장 오랫동안 사용되어 온 대표적인 글꼴이다.
트루 타입 글꼴은 해당 글꼴이 다양한 글꼴 크기에서 어떻게 표현될지에 대한 수준 높은 제어를 할 수 있게 해준다.

오픈 타입 글꼴(OpenType Fonts, OTF)

오픈 타입 글꼴은 사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준이다.
이 글꼴은 트루 타입 글꼴의 뒤를 잇기 위해 Microsoft에서 개발하였으며, 현재는 거의 모든 컴퓨터에서 사용되고 있다.
오픈 타입 글꼴은 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있다는 장점을 가지고 있다.

웹 오픈 글꼴 1.0(The Web Open Font Format 1.0, WOFF 1.0)

웹 오픈 글꼴은 웹 페이지에서 사용할 수 있는 글꼴 표준이며, 현재 W3C에서 사용을 권장하고 있는 글꼴 표준이다.
이 글꼴은 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴이다.

웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)

이 글꼴은 웹 오픈 글꼴 1.0 버전보다 더 나은 압축률을 제공하는 트루 타입 또는 오픈 타입 글꼴이다.

SVG 글꼴(SVG Fonts/Shapes)

SVG 글꼴은 SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 표준이다.
이 글꼴은 SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용할 수 있게 해준다.

임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT)

임베디드 오픈 타입 글꼴은 Microsoft가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴이다.

웹 글꼴(web font)별 지원 버전

웹 글꼴 별로 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

@font-face 규칙

@font-face 규칙은 웹 폰트(web font)를 정의할 때 사용하는 규칙이다. 웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있게 해준다.

우선 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가한다.
그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시하게 된다.

CSS3에서 @font-face 규칙을 사용하려면, 우선 font-family 속성을 이용하여 새로운 웹 글꼴을 위한 이름을 정의해야 한다.
그 후에 해당 웹 글꼴이 사용할 글꼴 파일의 주소를 지정해 주면 된다.

<style>
    @font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    #nGothic { font-family: myGothicFont; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

웹 글꼴의 두꺼운 글씨체(bold text)를 위한 @font-face 규칙도 다음과 같이 추가로 설정할 수 있다.

<style>
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjoBold.woff); font-weight: bold; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

위의 예제에서 웹 브라우저는 새로 만든 웹 글꼴을 적용하면서 두꺼운 글씨체에는 위의 규칙을 적용할 것이다.
이와 같은 방법으로 하나의 웹 글꼴을 위한 수많은 @font-face 규칙을 생성할 수 있다.

CSS3 @font-face 규칙 속성