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!
CSS supported via typeface.js
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