SIFR, Typeface.js, and Cufon text replacement technology

One thing that often makes designers and front-end developers headaches is the use of fonts, and designers often use some pretty fonts in their designs to achieve a cool interface. But this often makes coding people difficult, if you discard the use of these fonts in the page, designers will be depressed, and if you use these fonts, you need to cut the map and use a lot of extra style-another fish and bear the choice. Fortunately, there are a number of related alternative technologies now.

1. @font-face

CSS3 's @font-face attributes (actually introduced in CSS2) give us some hope, and Firefox 3.5 's new support for @font-face gives us a bit more of this hope.

So far, there have been safari, Chrome, Opera 10 and Firefox 3.5 support @font-face, and, more surprisingly, the IE series browsers also partially support this attribute. Other products from Mozilla, SeaMonkey 2 and Thunderbird 3 also support this property.

Browser compatibility

Browser	minimum version	support font
internet Explorer	4.0	only support OpenType fonts (EOF format)
3.5 (1.9.1)	truetype (TTF format) and OpenType fonts
opera	10.0
3.1 (525)	truetype and OpenType fonts

As can be seen from the table, ie browser does not support TTF format fonts, only support the EOF format, however, Microsoft officially released a weft tool, you can convert TTF to EOF, the need for friends to download and use .

The styles you can use are as follows:

@font-face {
	font-family:qianduannet;
	Font-style:  normal;
    font-weight:400;
	Src:url ("Sketchrockwell.ttf");
fontface{
	font-family:qianduannet;
	Font-size:3.2em;
	letter-spacing:1px;
	Text-align:center;
}

The styles in IE are as follows:

@font-face {
    font-family:goudy Stout;
    Font-style:  normal;
    font-weight:400;
    Src:url (GOUDYST0.EOT);
}

This is the easiest way to implement an embedded font at the moment.

@font-face Resources:

• CSS3 Series Tutorials: Embedding fonts/Network fonts
• Mozilla Developer Center: @font-face
• Web fonts with @font-face

SIFR

sIFR is not a new technology, but it has existed and been in use for many years. sIFR is a useful and handy text replacement technology that embeds network fonts into the page by FLASH+JS+CSS.

Considering the internet has a lot of resources, this article will not repeat, want to know friends can refer to the article:

1. How and when to use SIFR
2. sifr-Text Replacement Technology
3. sifr--Baidu Encyclopedia

Typeface.js

typeface is considered to be the best alternative to SIFR, compared to sifr,typeface less flash applications, using pure JS to embed related fonts, but also very simple to use: in the page to introduce the corresponding JS file OK.

 
From what we can see, using typeface requires only a few simple steps to use embedded fonts in the page.
 
Typeface Resources:
 

 

 
  
 
   
the downloaded font (This page can contain a font builder)
 
   
typeface View Demo
 
  

 
 
Cufon
 
Cufon is a relatively new technology that is positioned as a valuable sifr alternative, and it has many advantages:
 

 

 
  
 
   
No browser plugin--natively supported by browsers;
 
   
Compatibility--compatible with all major browsers
 
   
Ease of use-no configuration required
 
   
Speed-fast rendering of large numbers of fonts
 
  

 
 
The principle of Cufon:
 
Cufon the font file into an SVG font through the generator and then converts it to a VML file, which is important to IE because the IE native supports VML files. Finally, using complex JavaScript functions to encode VML files as JSON files (typeface is similar in principle). As shown in the following illustration:
 
 
There are many benefits to doing this:
 

 

 
  
 
   
With loading a font file, you just need to load some JS files on it;
 
   
The client does not need to manually code again;
 
   
The external JS file will not be executed until the load is complete, which allows us to achieve a clean replacement without blinking.
 
   
High compression rate. Relative to the font file, you can compress the 60-80%.
 
  

 
 
Usage of Cufon:
 
The usage of Cufon is similar to typeface, which requires loading a library file and a font file. Unlike typeface, you need to initialize Cufon with JS:
 
<script type= "Text/javascript" >
cufón.replace ("H2", {fontFamily: "Qlassik Medium"}); 
</script>
 
This is very different from the typeface definition of the font in the style.
 
Cufon Resources:
 

 

 
  
 
   
Cufon Project
 
   
Cufon Demo
 
   
Cufon Generator
 
   
wp-cufon A wordpress plugin that uses Cufon
 
  

 
 
Cufon and typeface.js contrast:
 

 
 
 
  
 
   
 
    
 
 
    
Cufón
 
    
typeface.js
 
   
 
   
 
    
File size
 
    
14.0KB (after compression)
 
    
16.3KB (not compressed)
 
   
 
   
 
    
Supported Browsers
 
    
Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome and Internet explorer6+
 
    
Firefox 1.5+, Safari, and Internet Explorer 6+, the latest version has been supported IE8
 
   
 
   
 
    
Supported font types
 
    
. TTF,. OTF, PFB, PostScript
 
    
. ttf
 
   
 
   
 
    
Supported font styles
 
    
Font-size, Font-style, Font-weight, Line-height, Text-shadow, color
 
    
Font-size, Font-style, Font-weight, Font-stretch, letter-spacing, Line-height
 
   
 
   
 
    
Alternative text?
 
    
Not yet supported
 
    
Not yet supported
 
   
 
  

 
 
As you can see from this comparison, the two are not much different, Cufon supports more browsers and font types, and typeface supports more font styles. The actual application seems to be typeface convenient, you can define fonts directly in the style, while Cufon has the overall file size advantages. Which one to use, look at your own preferences.
 
Summarize
 
In fact, SIFR, Typeface.js, and Cufon are all commonly used text replacement technologies that can be used to replace @font-face and achieve better browser compatibility. But each technique is not perfect:
 

 

 
  
 
   
@font-face is the simplest, although most browsers are supported, but its browser compatibility is not perfect, for IE also needs the special support of EOF fonts, and for Chinese fonts, are generally very large, which takes up a lot of page load time and server traffic.
 
   
SIFR is the best compatibility and availability, SEO-friendly solution, but it is also the most complex to implement, and requires a browser to support Flash plug-ins.
 
   
Typeface and Cufon are all used in IE to render VML, and in non-IE browsers using canvas to implement the "pseudo" font, they are relatively simple to use, but usability and user experience and SEO are not ideal.
 
   
The issue of copyright is a very important issue, regardless of which technology you use, you need to consider the authorization of the text.
 
  

 
 
So, what kind of program, depends on your needs and preferences, perhaps you would rather cut more pictures than to use these technologies?