top.jpg

웹페이지를 만들때 텍스트의 폰트가 정말 중요합니다.
특히 한글 같은 경우, 기본 브라우저 폰트는 바탕, 돋움, 굴림, 궁서체 밖에 없습니다.
하지만 가끔 디자인 할때 페이지 타이틀 이나 메뉴 등 몇몇 군대는 이쁜 폰트로 하고 싶기 마련입니다.

물론 일일이 이미지로 저장해서 각 페이지마다 넣으면 되지만, 블로그나 게시판 타이틀은 글마다 틀리기 때문에 그럴수 없는 경우가 많습니다.

그래서 지금 시중에 나와있는 2가지의 <h1> heading tag 안에 글씨를 넣으면 원하는 폰트의 글씨체로 변형하는 프로그램이 있습니다.

 sIFR (Scalable Inman Flash Replacement)

 Before
sifr_02.gif

After
sifr_01.gif


이건 Flash 와 Javascript 를 응용시켜서 embed 형식으로 글씨를 나타냅니다.
위에 보이는거와 같이, 원하는 폰트를 지정해서 나타나게 할수 있습니다.

하지만 안좋은 점은, 메뉴로 쓰기에는 너무 실용적이지 않고, 한글을 쓸 경우 용량이 커져서 로딩이 느릴수가 있습니다.

이 소스의 제일 좋은 점은, filter 를 써서 dropshadow, glow, blur 등 플래시에서 가능한 effect 를 줄수 있습니다.

Example: http://blooz.net/goodies/sifr/

Download: http://dev.novemberborn.net/sifr3/svn/test/distribution/demo/


 FaceLift Image Replacement


이건 sIFR 이랑 비슷하지만, Flash 대신 GD 를 이용해 이미지화 시키는 코드 입니다.
개인적으로 저는 이 방식을 씁니다, 우선 로딩이 훨씬 빠르고, 메뉴로도 쓰일수 있고, 더 실용적입니다.

하지만 sIFR 처럼 폰트가 매끈하게 나오지는 않습니다, 아무래도 flash 의 폰트 랜더링이 더 깨끗하고 매끄럽다 보니, GD 보다는 훨씬 더 보기는 좋게 나옵니다.

Before
facelift_5.gif


 After
facelift_6.gif




우선, facelift 폴더 안에 fonts 라는 폴더가 있습니다, 그 안에다가 원하는 폰트를 넣어주세요.

facelift_1.giffacelift_2.gif


그다음에는, config-flir.php 를 열어서 몇가지 코드를 추가 해야 합니다.

facelift_3.gif

아래 보이듯이, 폰트를 지정해줘야 합니다. 이름은 간단하게 폰트 이름으로 지정해주는게 쉽겠죠?


facelift_4.gif

그 후에는, example 에 가시면 facelift 를 쓰고 싶은 페이지 안에 어떤 javascript 를 넣어야 하는지 나옵니다.

나머지는 다운 받으셔서 demo 파일 보시면 대충 감이 오실껍니다.

아 그리고 중요한 점은, cache 폴더를 퍼시면 777로 지정해주세요.

Example: http://blooz.net/goodies/flir/

Download: http://facelift.mawhorter.net/download/

이 게시물을...