2013-08-20 9 views
0

저는 html5 캔버스 앱을 만들고 있는데, 항상 같은 크기 (모바일 장치의 경우 추가 크기 일 수 있음) 인 픽셀 아트 글꼴을 사용하게 될 것입니다. 대문자, 기본 구두점과 숫자, 총 50 개의 기호 만 있으면됩니다.특정 사례, 웹 글꼴 또는 비트 맵

나는이 글꼴을 내가 cufon http://cufon.shoqolate.com/generate/과 함께 변환하려고 시도했지만, 정말 저울질한다. 꽤 흐릿하거나 왜곡됩니다. 그것은 결국 할 것이지만 완벽하지는 않습니다.

캔버스를 사용하고 있기 때문에 캔버스를 사용하고 있기 때문에 모든 문자와 기호가 포함 된 스프라이트 시트를 사용해야하므로 생각이났습니다. 제 경우에는 그러한 수가 적고 모든 문자열을 표시하는 스크립트를 만드십시오. 해당 문자 스프라이트를 사용하여 화면에 텍스트를 표시합니다.

이 솔루션은 성능에 큰 상처를 줄까요?

글꼴의 기본 크기를 변경하는 것이 가능할 수도 있다고 생각했습니다. 나는 그것이 웹 브라우저에서 완벽하게 표시되는 웹을 위해 만들어지지 않은 모든 폰트의 특정 크기가 있음을 알아 차렸다. 크기를 조정하면 왜곡되기 시작합니다. 어떻게 든 그것을 바꿀 수 있습니까?

+0

마지막으로 필자는 스프라이트 시트를 문자로 사용했으며, 글꼴 크기, 스타일 및 색상이 하나 뿐인 제 경우에 매우 효과적이었습니다. 만약 내가 더 복잡한 경우에 나는 내가 받아 들였던 대답을 위해 갈 것이다 :) 고마워! –

답변

0

왜곡없는 크기 조정을 원할 경우 글꼴을 SVG로 변환하십시오.

일반 글꼴은 래스터 도면입니다 ... 잘못된 크기의 고정 된 픽셀로 구성됩니다.

SVG는 선을 그리는 벡터 드로잉입니다.

Firefox 및 IE를 제외한 브라우저에서 SVG 글꼴을 직접 사용할 수 있습니다.

두 브라우저의 경우 문서에 SVG를 포함하는 방법에 대해 조금 배워야합니다. 그리 어렵지 않습니다. SVG 글리프 (glyph) 데이터를 사용하여 텍스트 출력을 작성하는 텍스트 팩토리를 빌드 할 수 있습니다.

http://www.freefontconverter.com/

행운 프로젝트와 :

여기에 자신의 SVG 그림 문자로 TTF 폰트로 변환하는 웹 사이트입니다!