Font Replacement 기술 사용하기

외국에는 이미 유행했던 기술이나 우리나라는 사용하는 곳을 보기가 힘드네요. 물론 한글일 경우 폰트에 따라 용량이 크기 때문에 가독성만 좋다면 굳이 쓸 필요는 없습니다. 그러나 영문만 쓰시거나 혹은 그냥 쓰겠다 하시는 분을 위해 사용법을 알려드립니다.

예전의 IE 를 통한 웹폰트가 유행했던 시절이 있습니다. 그러나 다른 브라우저에서는 쓸 수가 없었죠. CSS3 에서는 가능할지 모르나 또 반대로 IE 에서는 쓰지 못합니다, 현재까지는요. 그러나 폰트를 자바스크립트로 변경하여 쓰는 기술이 있습니다. 웹폰트와 유사하나 모든 브라우저가 쓸 수 있다는 점이 강점입니다. CSS3 의 @font-face 의 경우 웹의 특정 경로에 위치시키고 사용하고 이 또한 비슷합니다.

헤더에 스크립트를 위치시켜야 합니다. 하지만 하나의 스크립트가 더 필요합니다. 이 기술을 사용할 수 있게 해주는 스크립트입니다. 전의 것은 그냥 폰트를 변환한 것 뿐입니다. 우선 변환해야겠죠?

http://cufon.shoqolate.com/generate/

Use the following value as the font-family of the generated font (optional) 는 옵션이지만 원하는 이름을 적으세요. 다 변환하고 위의 Download 탭으로 스크립트를 받습니다. 이렇게 2가지 스크립트를 헤더에 올리면 99% 완료입니다. 이제 원하는 곳을 지정해야겠죠?

h1 은 원하는 태그명 fontname 에는 아까 옵션으로 적어준 이름 혹은 기본 폰트명을 쓰면 됩니다. 다음 폰트도 가능합니다. 외국에서는 간혹 헤드라인 폰트가 갑자기 바뀌는 경우가 있는데 모두 이 기술을 사용했기 때문입니다. 이쁘게 꾸민다고 남용하지는 마셨으면 합니다.

관련 포스트:

  • 관련된 포스트가 없습니다.

Tagged : , ,

One Response to “Font Replacement 기술 사용하기”

  1. [...] 사용하기 http://hhomm.com/?p=214http://blog.werconnected.info/font-replacement-기술-사용하기/ … Typeface.js? cufon.js? 한글 글꼴의 최적화 테크닉? … 첼시가 [...]

Leave a Reply