bloginfo('name');

bloginfo('description');

Custom fonts: text replacement via Canvas and VML

Oktober 28th, 2008 by Blu:RayNe

Still we have to wait until @font-face is ready in all modern browsers. We had text-replacement by Flash, by images created on the server and by half-working SVG so far. Now it’s time for another approach: text replacement via pure Javascript!

Basically the script draws JSON font outlines converted via a Perl-Script from TTF and uses both VML and Canvas for rendering. Only problem: text cannot be selected and copied to the clipboard anymore.

There’s work left to be done. Planned improvements:

  • Full support for @font-face rules, if possible
  • Support for hinting (this seems like a viable option)
  • Speed improvements, especially for IE
  • Work around Opera’s getComputedStyle() issues
  • Possible support for SVG backend
  • Work around needing to specify ‘typeface-js’ as a class name
  • More CSS support, including :hover and x-height
  • React to DOMNode* events to support DHTML

 

Great job: It’s working on all major modern and semi-modern browser (MSIE7). I’ll be using that! Thanks!

More here: http://typeface.neocracy.org/

Filed under CSS, JavaScript having

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.