How to use FontLab to make icons into fonts to display on the website

We all know that all browsers now support CSS3 custom fonts (@font-face), including IE6, but their support for font file formats is not the same. Then for the various icons used in the website, we can try to use font to achieve it. This article will explain this usage in detail.

Why make the icon a font?

In many website projects, we often use various small transparent icons, and then the website must be compatible with various browsers, and may have multiple sizes, and even consider the needs of skinning. Then we need to output these small icons to various sizes, colors and file formats, such as png8 alpha transparent or png8 index transparent and so on.

For example, various small icons used by twitter:

In this case, using fonts to implement icons has many advantages:

The font file is small, generally 20-50kb;
Easy to edit and maintain, size and color can be controlled with css;
Transparent and fully compatible with IE6;

How to turn icon into font?

The most important thing is to perfectly restore the icons in the design draft (with vector paths, bitmaps cannot be converted) into fonts, which is not very troublesome.

We need to use some font editing software, such as FontCreator, FontLab, etc. Here we use FontLab to demonstrate.

The steps to restore are simple:

PSD–>eps–>FontLab, that is, convert the PSD to the eps format of illustrator, and then copy a character to FontLab.

Specific steps:

Open the design draft psd and save it in Photoshop eps format. Here we take the emoticon icon of the talk box in Qzone as an example:

Open the saved eps file in illustrator:

Ungroup, then click on an icon to copy.

Open FontLab and open any font file, such as tahoma.ttf:

Then double-click a character, delete the original graphic, and paste the icon object just copied:

Adjust the size of the graphic, and an icon is restored.

It's that simple. After all icons are restored, the font file can be generated.

To view the corresponding characters of the font, you can right-click on a font in the font list to view the properties (shortcut Alt+Enter) to view the characters corresponding to the font:

You can see that the character corresponding to the font is i, and the unicode encoding is 0069.

Browser support for font formats:

At present, the biggest difference is the font format support of each browser:

webkit/safari: supports TrueType/OpenType(.ttf), OpenType PS(.otf), iOS4.2+ supports .ttf, iOS 4.2 and below only supports SVG fonts;
Chrome: In addition to those supported by webkit, starting from Chrome 6, the woff format has been supported;
Firefox: supports .ttf and .otf, and supports woff format since Firefox 3.6;
Opera: Supports .ttf, .otf, .svg. WOFF is not supported yet Opera 11 starts to support WOFF (thanks Apostle for reminding~~);
IE: only supports eot format, IE9 began to support woff.

Note: The above information comes from: webfonts.info

Note: woff is the latest web open font format, recommended by w3c. The main advantage is that it is optimized for browsers and the font file is small. Details can be found on the wiki :

Use icon font in CSS:

First use font-face to declare the font:

@font-face {
    font-family: 'emotion';
    src: url('emotion.eot'); /* IE9*/
    src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('emotion.woff') format('woff'), /* chrome、firefox */
         url('emotion.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('emotion.svg#svgFontName') format('svg'); /*  iOS 4.1- */
    }

Then, just use that font on the icon element:

1
2
3

.icon{font-family:"emotion" Tahoma;
...
}

Finally, use this font in the page:

<span class="icon">i</span>

Browsers that support CSS3 can be a little more advanced. It may not be so convenient for us to modify html every time. If we want to change an icon, we may need to modify related characters, such as changing i to e, etc. If you use css3 pseudo-elements, it can be very convenient:

.icon{
display:inline-block;
width:16px;
height: 16px;/*Occupies a bit**/
...
}
.icon:after,.icon::after{
font-family:"emotion" Tahoma;
display:inline-block;
content: "i"; /* call character here */
width:16px;
height:16px;
margin-left:-16px;/*position:absolute or something, depending on the specific situation*/
}

Well, it is to use the actual element to occupy the place, use the pseudo element + content attribute to display the icon, and then overlay it on the actual element. After that, we only need to change the css style to modify an icon.

IE is still tricky:

Because IE9 previously only supported the eot format, you need to convert ttf to eot first. You can use Microsoft's official WEFT software here, or you can use some online tools:

http://www.kirsle.net/wizards/ttf2eot.cgi convert ttf to eot format online;
http://www.fontsquirrel.com/fontface/generator Powerful online conversion of ttf to eot, woff and other font formats

In addition, the eot file must be whitelisted before it can be used. CreateMyEOT is recommended here:

Summarize:

In fact, one disadvantage of this method is that it only supports solid-color icons, and at most high-end browsers can implement gradient colors or graphic masks.

Of course, we have a lot of scenes with solid color icons, especially when Metro UIs like Windows 8 are starting to become more and more.

In addition, this method can effectively reduce page requests, but for students who are accustomed to using CSSGaGa 's auto sprite function, this method does not greatly improve page performance.

However, for mobile terminals, especially in webapps, this method still has a lot of use. It can be easily compatible with multiple resolutions, and the effect of offline storage is better.