Turn Cufon in rendering Web page fonts you don't know.

Listing 1. Invalid font-family font specified

<style> . Introduction {font-family: ' Baroque Script ';} </style> <p class= "Introduction" style= "FONT-SIZE:36PX" ><?php echo $introduction;?></p>

Because the baroque Script font is not installed on most browsers. So on these browsers, the system will actively "ignore" the code about the font-family, instead of using the default font for output

Figure 1. Company Profile (part) designed by the designer for the website

Original idea of the original design.

Figure 2. Company profile output effect on Baroque Script font browser not installed

It turned out to be unsightly.

Listing 2. Introducing external fonts by @font-face

... @font-face {font-family: "baroque Script"; Src:url (' Baroquescript.ttf ')} ...

Listing 3. Introducing the Cufon Core Library

<script src= "Cufon-yui.js" type= "Text/javascript" ></script>

Listing 4. Introducing Cufon Font Files

Attaching Cufon Conversions to tags

After two of these preparations have been completed, the fact that the Cufon class library is used to render the font is very simple, involving only one of the core methods provided by the Cufon class library, the Cufon.replace method

Listing 5. To render a tagged font using the Cufon.replace method

<script> cufon.replace (' P ');

Listing 6. Cufon.set Syntax specification

For example, for example 2.htm, if we want the color of the relevant text to be red in the display, then we can set the color configuration item first by Cufon.set before calling the Cufon.replace method, as shown in the following code, and the complete implementation can refer to the example 3.htm.

Listing 7. Use Cufon.set to change the color of the rendered text

Listing 8. The complete cufon.relace Syntax specification

About default render fonts

If you do not specify by fontFamily configuration, then Cufon will render the relevant tag using the font corresponding to the Cufon font file that was introduced to the system in the order.

This is another major feature of the Cufon application. On the same page, Cufon can provide different font rendering effects for different tagged objects, which is, of course, a very common requirement for real Web applications.

Cufon support for this feature is still done through configuration items. Developed in Cufon you can determine which font to use for the corresponding tagged object by specifying the configuration item "FontFamily".

Listing 9. Render a tag with a different font

Cufon.replace ("#id1", {fontFamily: "Baroque Script"});

Listing 10. Pie Chart Description Instance

var pie = [ {"Color": "Red", "percent": +}, {"Color": "Green", "percent": +}, {"Color": "Blue", "Percen T ": 40}

Listing 11. Interface Object Declaration

var statisticalgraph = (function () {  This.draw = function (data, type, dest, Options) {...};  ... return this;  
Listing 12. Pie Chart Painting interface

... case "pie": return (Isie)? _drawvmlpie (data, dest, Options): _drawcanvaspie (data, dest, options); Break ...... Listing 13. Create a Canvas painting area var canvas = document.createelement (' canvas '); Canvas.width = (options[' width ')? options[' width ']:100; Canvas.height = (options[' height '])? options[' height ']:100; Create a Brush object After we created the canvas object, we didn't have the ability to paint directly on canvas canvas, but we needed to create a brush object to be able to paint on canvas canvas. The method of creating this brush object is also very simple, as shown in the following code, where "2d" indicates that a two-dimensional planar pattern is used to paint. Listing 14. Create a brush Painting and filling sector areas So how do we use the Brush object to make a statistical chart like a pie chart? From a geometrical point of view, each pie is actually composed of a number of fan-shaped, so the core of the pie chart painting, in fact, is in every sector of the painting. For Canvas, the following two points are required to be specifically understood by the reader. First, canvas provides points, lines (including arcs), and drawing methods for closing straight lines, circles (including ellipses), but canvas does not provide direct support for other irregular shapes, such as fans. Second, Canvas allows for filling and boundary drawing of any closed interval, using color. Of course, the combination of certain mathematical knowledge, especially trigonometric knowledge, I believe that this problem is not difficult to solve. For the sake of convenience, the author of this article will be annotated by the code to the reader to introduce some of the key in this process, for the reader's reference. Listing 15. Painting and filling a fan Listing 16. Basic application examples for VML <p> <v:line from= "0,0" to= "100,0"/> Therefore, the process of dynamically creating graphics under VML, which is the process of dynamically creating a VML language tag and attaching it to a canvas (that is, a tag), is exactly the same. Behavior style of use. This is another differentiator for VML applications. In the VML specification, if the developer wants to use VML technology for page painting, it is not only necessary to introduce the namespace of the language in the Web document, as in the General XML language (the VML namespace is "URN:SCHEMAS-MICROSOFT-COM:VML"). You also need to ensure that all VML tags have a behavior style with a value of "url (#default #vml)". Otherwise, IE browser will not parse and process it. This is why the reader can see in most VML applications that there is a CSS style description similar to the one shown in the following code. Listing 17. Need to add behavior style to the tag to resolve for IE <!--[if ie]> <style>cvml\:* {behavior:url (#default #vml);} </style>

Turn Cufon in rendering Web page fonts you don't know.