Nexus에서 글꼴을 관리하는 typeface.js 를 작성했습니다. 이 프로젝트는 예전에 소개한 sIFR과 마찬가지로, 사용자의 시스템에 존재하지 않는 폰트를 보여주고자 할 때 유리합니다. sIFR과 다른 점은 sIFR은 플래시를 사용했지만, typeface.js는 자바스크립트만을 사용해 접근성을 높였다는 것입니다.
마치 방문객의 PC에 글꼴이 설치된 것처럼 사이트에서 보여주고 싶을 때, 이미지를 만들거나 플래시를 사용하는 대신 typeface.js를 사용하시면 HTML과 CSS만으로 원하는 폰트의 그래픽 텍스트를 보여줄 수 있습니다. 아직 진행중이긴하지만, 사이트에서 그래픽 텍스트를 렌더링할 정도의 기능은 충분합니다. 사용법을 알아보겠습니다. typeface.js 라이브러리와 typeface.js 폰트를 읽어들이면, 무난하게 진행됩니다:
[code:js]
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
 
<div class="myclass typeface-js" style="font-family: Helvetiker">
        Text here in Helvetiker font...
</div>
예제를 보시면, 얼마나 CSS와 잘 연동되는지 보실 수 있습니다.

Canvas나 VML 레거시 지원을 사용한 것은 아주 훌륭합니다. 글자가 선택되었으면 정말 좋았을 것 같습니다.
추가 : 안타깝지만 이 기술은 한글 폰트에서는 사용하기가 어려울 것 같습니다. typeface.js는 글자를 이미지로 만들기 위해서 글꼴 정보를 js 파일로 만드는데, Helvetiker 폰트의 일반체(꾸밈이 전혀 없는) 경우만 해도 64KB 정도의 용량을 차지합니다. 영문 글자수는 대소문자를 모두 합쳐도 52자밖에 안되는데 한글은 자주 쓰이는 글자만 2350자에 달하며, 글자 하나의 모양도 영문보다 복잡해 훨씬 더 많은 데이터가 소모될 것입니다. 아쉽지만 사용하기 어려운 기술인 것 같습니다.

from Typeface.js: A potential replacement for sIFR
Posted by 행복한고니 트랙백 0 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon daybreaker 2008.10.28 13:38

    Firefox 3.1에서도 웹폰트 기능이 구현된다고 하던데, 그 경우도 역시 한글 글꼴은 용량 문제로 사용하기 어렵지 않을까 싶습니다. 유니코드 11172자를 다 하면 좋겠지만 대역폭 문제 때문에 완성형 2350자를 특정 크기에 맞춰서 최적화 처리하는 별도 작업이 필요할 것 같네요;;