[기타] font-face사용법 및 eot,woff폰트파일 변경방법

@font-face에 대하여 알아보자 

1. font-face란

@font-face 규칙은 CSS3에 새로 추가된 웹 글꼴명세로 시스템에서 지원해주지 않는 글꼴을 내려받아 웹에 적용시킬 경우 사용하는 방법이다.  

2. font-face사용법 

font-face사용법은 아래와 같다. 

@CHARSET "utf-8";

@font-face 

{ 

            font-family:rixttf; // 폰트 변수명 설정 

    src:url('../../font/RixGoB.ttf'); //폰트 경로 설정

}

   a,body{

            font-family:rixttf ; // a,body에 폰트적용  

   }

여기서 한가지 알아야 되는 사실이 있다 . 

각 브라우저마다. font-face 사용법이 미묘하게 조금씩 다르다는 사실이다. 

그 부분에 대해서는 추후에 정리하도록 하겠다. 

3. ttf를 eot로 변환하기 

eotfast-2-22-10.zip

위파일을 다운로드 받아서 압축을 풀어준다.

위에 보이는 EOTFASK-1에 ttf폰트 파일을 끌어다가 넣어주면 eot파일이 생성된다 . 

사용법은 매우 간단한 것 같다. :) 

4. ttf를 woff로 변환하기 

sfnt2woff.zip

위파일을 다운로드 받아서 압축을 풀어준다.

압축을 풀고 나면 ttf파일을 해당 압축을 풀어준 폴더에 넣어주고  

cmd(명령프롬프트)를 이용해 안에 있는 실행 파일과 함꼐 ttf 폰트 명은 함께 입력해주면 woff파일이 생성된다. 

 자세하게 설명하자면 

1) cmd 에서 압축폴더를 푼 장소로 이동한다. 

위와 같이 입력해주면 

woff 파일 생성완료!