@ Font-face and other font replacement solutions

Document directory

• Use Image replacement
• @ Font-face
• Sifr
• Typeface. js

Beautiful fonts are a magic weapon for designers, but in web design, this magic weapon is almost ineffective.Custom fontIt is often because the user's computer does not prefabricate the font and cannot be displayed in the desired way. This article will provide some solutions for this problem. After balancing the advantages and disadvantages, I believe there is always a suitable solution for your project.

Use Image replacement

This is the most common method. We often cut the part of the Custom font in the design drawing into an image, reference the image on the page, or use the background image in CSS, embed an image into an element.

h1{    width : 200px;    height : 50px;    background : url(logo.png) no-repeat;}

This method is very fast and simple, and has good browser compatibility, but its shortcomings are also very prominent, it cannot be reused, it is difficult to maintain, when the image is used too much, it will seriously affect the page loading speed.

@ Font-face

@ Font-face is part of W3C CSS fonts module. It allows developers to use custom fonts on pages, regardless of whether the font is installed on users' computers. Syntax for defining and using a font is very simple:

@font-face {  font-family : dolmen;  src : local("dolmen"), url(dolmen.ttf); }body{    font-family : dolmen}

Font-family:Define a font name for future use.
SRC:Use URL to define the remote path of the font file, or use local to define the font name on your computer.

The following is an example of using this technology:

Hello @ font-face

@ Font-face is supported in all modern browsers. Microsoft started to use this technology even as early as IE 4, but different browsers support different Font types, browsers other than IE support the TrueType and OpenType types, while ie only supports the embedded OpenType type. Therefore, the preceding example does not have any special features in IE. The woff font support has been added since Firefox 3.6.

Sifr

Sifr is a well-known font replacement component. It uses flash to replace the text on the page and uses JavaScript to control it. The following is a sample code that uses sifr to define a font and uses a Custom font to replace the H1 element text on the page:

var cochin = {  src: 'cochin.swf'};sIFR.activate(cochin);sIFR.replace(cochin, {  selector: 'h1'});

As we all know, flash is incredibly overhead for browsers. Although sifr developers have optimized the exported flash as much as possible, it is still not recommended to use this technology to replace too much content on pages, generally, it is considered reasonable to replace titles with less than five titles. Beyond this range, the page performance is greatly reduced, which may be unbearable to users.

Typeface. js

Although its reputation is far inferior to sifr, typeface seems to have a better prospect. Instead of using flash, it uses JavaScript to plot vector images to replace text. It is also easy to use:

<script src="typeface-0.14.js"></script><script src="helvetiker_regular.typeface.js"></script><div class="typeface-js" style="font-family: Helvetiker">Text here in Helvetiker font...</div>

Typeface. JS supports a wide range of browsers and provides better performance. However, in IE 6/7, the rendering performance of vector graphics is poor, and typeface is used. JS, it still needs to be restrained.