@font-face Rule


Home > Document > CSS > Pseudo > @font-face Rule

@font-face Rule

@font-face Rule은 Web에서 사용하는 Open Type font를 지정하는 규칙입니다. 먼 말인고 하니, fontfont-family 페이지에서도 언급했지만, 이 페이지에서 다루는 @font-face Rule을 사용하지 않는 이상 문서 작성자가 내 컴퓨터에만 설치된 글꼴을 지정하면, 사용자는 그 글꼴을 볼 수 없다는 말입니다. 즉, 이 @font-face Rule을 지정하면 사용자의 컴퓨터에 그 글꼴이 있건 없건 무조건 작성자가 지정한 web font로 문서를 볼 수 있다는 말입니다.

그러나 불행하게도... 안타깝게도... 그냥 확장자가 .TTF인 True Type Font 파일을 내 웹 공간에 Upload 시킨다고해서 그 글꼴을 web font로 사용할 수 있는게 아니라는 거져...T.T 만들어서 써야 됩니다. 아마 초보자의 경우 영 먼말인지 모를 것 같으니까 일단 .TTF 글꼴 파일이 어디 쯤에 있는지 부터 알아 보겠습니다.

Windows95, 98 사용자는 Windows / Fonts 폴더를
Windows NT 사용자는 WINNT / Fonts 폴더를 탐색기로 열고 오른쪽 창의 Icon을 보면 크게 두가지 Icon이 대 다수를 차지하고 있는 것을 확인 할 수 있을 겁니다. 즉,

open_type (1K) : Open Type 과 true_type (1K) : True Type

이렇게 두 가지의 Icon을 말하는 건데 이 중에 Open Type을 Microsoft Weft 라는 프로그램을 사용하여 확장자가 .EOT (Embeding Open Type)인 파일로 변환해야 합니다. 또한 현재 시중에서 구할 수 있는 한양폰트, 현대폰트등의 한글은 안된다고 봐야 되져. 학씨리 안된다고 하지 못하는 이유는 한글도 web font용으로 나온 글꼴이 몇개 있기 때문이져. 제가 알고 있는 몇 개의 web font 중에서 요즘 많이 쓰는 '티티체'라는 글꼴로 테스트를 해 봅시다. 여기를 클릭하고 회원가입을 하면 무료(개인 정보를 대신 받으니까 사실 무료는 아님)로 다운 로드 받을 수 있는데 그렇게 한 걸로 치고 진행하도록 하져.
*참, 운영하고 있는 웹 사이트가 없고, NT의 IIS나 Windows98 용 PWS로 Localhost라도 돌리지 않는 사람은 해도 소용없으니 안타깝지만 포기하셔야 할 듯... 웹을 운영하는 사람은 요구하는 정보를 정확히 입력해야 web font가 작동합니다. 그리고 개인적으로 그 사이트와 친분이 있는 것도 아니고, 별로 좋아하는 글꼴도 아니구요... 아는게 티티체 뿐이라서...

@font-face Rule
사용법 @font-face {font-family:Starscraft; src:url(경로/폰트파일이름.eot)}
Initial N/A
Applies to text관련 element
Inherited Yes
Percentages N/A
Media Visual




web font 설치 순서
  • 다운로드 받은 파일의 압축을 풀면
    TTche.eot, TTche.htm, TTche.ttf 이렇게 3 개의 파일이 있는데
    TTche.ttf : 윈도우 시스템 글꼴로 windows / fonts 폴더로 복사한다.
    TTche.eot : FTP로 자신의 웹 사이트로 Upload. 폴더를 따로 만들어서 Upload해도 됨.
    TTche.htm : TTche.eot와 같은 위치에 Upload. 하고 브라우저에서 웹 사이트 URL로 파일을 열어서 글씨체가 보이면 일단 작동은 성공.


  • TTche.htm 파일을 편지 툴로 열어보면 Style Block 에
    <STYLE TYPE="text/css">
    <!-- 
      @font-face {
        font-family: 티티체;
        font-style:  normal;
        font-weight: normal;
        src: url(TTche.eot);
      }
    -->
    </STYLE>
    
    이런 @font-face 지정이 되어있는데 반드시 사용할 파일 마다 style block 속에 지정해 줘야 한다.


  • 이제 web font를 사용하고 싶으면 아래의 예와 같이

    <P style="font-family:티티체;">@font-face Rule</P>

    와 같이 사용한다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색