CHAPTER 10 ■ STYLING TEXTText Replacement with Canvas and VML
Problem You want to replace text with canvas and VML.^
Solution This technique, also know as Cufón, converts font paths to vector graphics stored in JSON data
format and then renders the fonts to canvas elements or VML (depending on availability) using a
JavaScript rendering engine.
The example uses https://github.com/sorccu/cufon.
Follow these setup steps:- Download cufon-yui.js from the Cufón web site (http://cufon.shoqolate.com/generate/)
and upload it to your own server. - Use the font converter (http://cufon.shoqolate.com/generate/) to generate your .font.js
file, which you also have to upload to your server. - Include cufon-yui.js and .font.js in your HTML code.
- Set the element to be replaced: for example, Cufon.replace('#content > h1:first-
child');.
Pattern JavaScript^
Location This pattern applies to any block, float, absolute, or fixed element.
Tips This technique works well even with large amounts of text.
Text can be selected and copied, unlike the case of Text Replacement with Image.
All Cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII,
should work fine.
A significant disadvantage of using Cufón is the requirement that the embedded font's license
allow its distribution in unencrypted form, which many commercial fonts expressly forbid.
Related to Text Replacement with Image