코딩의 시작, TCP School

◀ 이전 다음 ▶

CSS3 웹 글꼴

CSS3 웹 글꼴(Web Font)

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

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

- @font-face 규칙

CSS2 글꼴

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

1.font-family

2.font-style

3.font-variant

4.font-weight

5.font-size

CSS 글꼴 수업 확인 =>

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

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

규칙
@font-face	9.0	4.0	3.5	3.2	10.0

웹 글꼴의 형식

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

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)별 지원 버전

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

웹 글꼴
TTF	9.0	4.0	3.5	3.1	10.0
OTF	9.0	4.0	3.5	3.1	10.0
WOTF 1.0	9.0	5.0	3.6	5.1	11.1
WOTF 2.0	지원하지 않음	36.0	35.0	지원하지 않음	26.0
SVG	지원하지 않음	4.0	지원하지 않음	3.2	9.0
EOT	6.0	지원하지 않음	지원하지 않음	지원하지 않음	지원하지 않음

@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 규칙도 다음과 같이 추가로 설정할 수 있습니다.

예제