In webpage design, the designer adds some fonts with special effects to make the page more beautiful. However, the visitor's system generally does not have these fonts installed, so using the font-family attribute to define these special fonts won't work, so people come up with a lot of solutions. Today we will introduce one of the Cufon solutions.
Definition and Basic PrinciplesWhat is Cufon? To put it simply, Cufon is a pure JavaScript open-source class library used to replace sIFR (an earlier Custom font implementation solution) to render text fonts on webpages. The basic principle is to use the proprietary page painting scheme launched by the browser, such as VML, Canvas, and SVG, to "Draw" The text characters to be displayed on the webpage location, and replace the text to be displayed in the original area. If your browser is Firefox, right-click the text rendered by Cufon and you will find that the text can be viewed and stored in the image mode.
Step 1: Introduce the Cufon core libraryAs a JavaScript-based web page font Introduction scheme, Cufon's core function is provided to developers through a JavaScript class library named "cufon-yui.js. Therefore, the first step to use Cufon technology is to introduce this type of library to Web pages. First download the class library file from the Cufon website (the latest version is 1.09i), as shown in:
Introduce the Cufon library in the Code as follows:
<script type="text/javascript" src="js/cufon-yui.js"></script>Step 2: Create and import a font file
The font file mentioned here is the Cufon font file, which is another key to the use of Cufon technology. What is a Cufon font file? In short, the Cufon font file is a font file created according to the font description standard proposed by Cufon. Unlike other font creation standards such as TrueType and OpenType, the file formed according to Cufon is a standard JavaScript script file, it is parsed and processed by the Cufon class library.
Cufon has prepared corresponding online tools for developers to implement this conversion process. Currently, the Font standards that can be converted by tools include TrueType, FreeType2, OpenType, and PostScript Font. It should be said that this covers almost some mainstream Font creation standards. The use of the tool is not complex, so I will not go into details.
Taking the Denne Shuffle font as an example (more creative fonts can be seen in 20 very interesting high-quality free fonts), after using this tool to generate the corresponding Cufon Standard font file "Denne_Shuffle_400.font.js, you can introduce it to the page as shown in the following code:
<script type="text/javascript" src="js/Denne_Shuffle_400.font.js"></script>Step 3: Apply Cufon Rendering
After completing the above two preparations, it is very easy to use the Cufon class library to render the font. This only involves a core method provided by the Cufon class library, that is, Cufon. the replace method is as follows:
At the same time, Cufon also provides the concept of "Option" to more accurately control the font style used for font rendering, to help developers directly specify the corresponding font style value in the Cufon method. The font size is 66 pixels and the color is red for the two items following the code. For more information, see the official documentation of Cufon.
The complete sample code is as follows:
<!DOCTYPE html>You can download the Demo from a friend who needs it. The final result of this example is as follows:
Advantages and disadvantages and compatibility advantages:
1. 100 times simpler than siFR Technology
2. Fast and instant execution
3. independent from the server Language
Disadvantages:1. dependent on JavaScript
2. text cannot be selected
3. There is no way to implement the hover transform effect.
The compatibility of Cufon Technology in mainstream browsers is shown in the following table:
| 5 + | 1.5 + | 1.0 + | 3.0 + | 9.5 + |
In general, this solution for implementing custom fonts is relatively simple. Although it is somewhat inadequate, it is also a relatively good solution for compatibility, I personally think that in the future, @ font-face of CSS3 will be more likely to become the main method to implement custom fonts on webpages.
References:
1. Use Cufon to render webpage Fonts
2. The Easiest Way to Use Any Font You Wish
Related Articles:
1. Use CSS3 @ font-face to implement personalized fonts 2. Web font format introduction and browser compatibility OverviewStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
