Font-face

@font-face는 CSS3 이전에 등작했기 때문에 엄밀히 말하면 CSS3의 속성이라고 할 수 없습니다. 하지만 CSS3에 와서 @font-face를 포준으로 만들려고 하고 있기 때문에 CSS3와 함께 설명합니다.

글꼴 정의하기 및 사용하기

글꼴 파일 형식 - 'truetype(ttf)', 'opentype(otf)', 'embeded-opentype(eot)', scalable-vector-graphic(svg, svgz) 등이 있음.

정의하기

							@font-face {
								font-family: 글꼴 이름;
								src :url(글꼴 파일 경로) format(파일 유형);
							}
						

사용하기

							@font-face {
								font-family: Blackout;
								src :url('Blackout.ttf') format('truetype');
							}

							.noraml_text {
								font-family:Blackout;
								font-size:80px;
								color:#006;
							}
						

기억해 두어야할 사항

  • 1. 글꼴의 라이센스를 확인해야 합니다.
  • 2. 모든 브라우저가 @font-face를 지원하는 것은 아니라는 점을 기억해야 합니다.
  • 3. 페이지 로딩 속도를 고려해야 합니다.
  • 4. 설치된 글꼴인지 먼저 확인합니다.
    									@font-face {
    										font-family: Blackout;
    										src :local('Blackout'), url('Blackout_2am.ttf') format('truetype');
    									}
    								

    상기의 코드의 경우, 우선 사용자 시스템에서 Blackout이라는 글꼴을 찾아본 뒤 없으면 Blackout_2am.ttf 파일을 로딩합니다.

  • 5. IE는 eot 파일만 지원합니다.
    									@font-face {
    										font-family: PTSans;
    										src :url('pts76f.eot'); /* IE를 위한 코드 추가 */
    										src :local('PTSans'), url('pts76f.ttf');
    									}
    								

    TrueType(ttf) 글꽁이나 OpenType(otf) 글꽁은 IE를 제외한 모든 브라우저에서 제대로 작동하지만 IE에서는 글꼴을 제대로 표시하지 못합니다. 그것은 IE가 Embeded Open Type(eot)만 지원하기 때문입니다. 모든 브라우저에서 제대로 동작하는 웹 페이지를 만들려면 글꼴을 정의할 때 IE를 위한 소스 코드를 한 줄 더 추가해야 합니다.

ttf 폰트를 eot 폰트로 변환하기

디자인이나 기타 컴퓨터 작업에서 사용하는 폰트는 대부분 트루타입 폰트(*.ttf)입니다. 그런데 파이어폭스나 크롬에서는 트루타입 폰트를 그대로 웹에서 사용할 수 있는 반면, IE에서 사용하는 웹 폰트는 오픈타입 폰트(*.eot)입니다. ttf 폰트만 있고 eot 폰트가 없는 경우 eotfast로 손쉽게 변환할 수 있습니다.
http://www.eotfast.com 사이트로 접속한 후 'Free Download'를 클릭해서 필요한 파이을 다운로드하고 설치하세요. 이 프로그램을 설치하면 폴더가 하나 생기면서 그 안에 파일들이 저장됩니다.
변환할 ttf 파일을 복사해서 그 폴더 안에 옮긴 후 ttf 파일을 OETFAST-1 파일 위로 드래그하면 눈 깜짝할 사이에 폴더 안에 eot 파일이 만들어 질것입니다.