Web Design tips: Icon font Production details case

Article Description: now in the introduction of icon font, is not what the new vocabulary, the internet has a lot of articles on it, and many sites have also used it, this article is mainly to make icon font of the whole process of sorting out, and added to their own in the production of problems encountered, So that you can use it in the future when you can quickly get started and avoid these problems.

Zhaolei: Now in the introduction of icon font, is not what the new vocabulary, the internet has a lot of articles on it, and many sites have also used it, this article is the main production icon font of the whole process of sorting, and added to their own in the production of problems encountered, So that you can use it in the future when you can quickly get started and avoid these problems.

The first thing to say is, what is icon Font?

I think we now usually refer to the icon font, is the use of font files to replace the picture file, to show the icon, special fonts and other elements of the method.

Second, know what is icon font, we have to understand what it can do, how we use

This is a place to use icon font in Amoy nets.

This is the Sina Micro-BO Micro Bar to use the icon font of the place

And here we have our own little ronin.

Three, we naturally want to see what icon font has advantages and disadvantages, so that we decide whether to use it

First, it's much smaller than the picture.

This is made out of a group of icon font font file, imagine if this is a picture of how big, 50K? 100K? Even more? But now this file is only 13K in size.

Not only small size, but also has better maintainability (because it is a vector, so the tension is not deformed; color can be replaced, support some CSS3 effect on the text)

Like these pictures can be made with icon font

And can also be placed in the CSS through Base64, so that the image does not produce HTTP requests

Of course, Icon font is also flawed, because it is a font, so only support the picture is pure color, a variety of colors do not support the

There are many colors in the expression, so it's impossible to use icon font.

But the appearance of a large number of pure color icons under WIN8, is it an opportunity for icon font to be popularized?

Although making icon font naturally increases the cost of refactoring, it's worth it compared to later maintenance.

Four, the advantages of Icon Font is obviously greater than the shortcomings, and there is room to use, so we decided to use it, we must learn how to make icon font

Before making, we need to know what tools are needed, but it's very simple, just fontcreator,ps these two tools.

The production process, first of all, we need our designers to give the icon vector map, we need the icon in the PS layer grid, then save as Png24, and then in the fontcreator through the picture into the font, the size of the adjustment (the following will give the use of the various values of font production, I think it is more important to leave the width and the distance from the baseline, the best kind of icon layout of the same, so also convenient alignment, and finally through the online tool to convert font files to the various formats we need.

This is the meaning of each value of the font

Because there are differences in the font problems supported by different browsers, we need to convert our prepared fonts into multiple formats with a better font conversion online address:
Fontsquirrel If there is no special need when we convert, it is possible to convert directly through basic

After the completion of the production we are sure to use it

The first is the font declaration, because each browser supports different font files, so we need to make a variety of font files for the browser to achieve compatibility purposes

To display in the Web page, there are currently two ways, one is directly in the HTML to enter the corresponding icon represented by the font, the advantage is compatible with all browsers, is to change icon when the downstream of the backend programmer colleagues to help change.

Another way is to add in CSS through the pseudo class, so you can directly control the category of icon through CSS, but not all browsers are compatible, but we must take into account the IE6 users.

By analyzing the processes and projects that are now being developed, it is appropriate to enter them directly into HTML using the first method.

Of course, we enter the time how to know to enter the character is the icon I want to enter it? You only need to check the Unicode comparison to match the Unicode code in the font maker software.

We make icon font for our own use, because a convenient management and use of HTML Component page is essential, which should include the icon description, the corresponding code and so on, the purpose is to use their own or colleagues can be very convenient.

Personal experience:

In the process of making icon font, I also encountered some problems

Cross-domain issues, this is a cliché, by configuring their own servers or placed in the same domain can be resolved, you can also use the Base64 into CSS.
When making a font file, be sure to remember not to delete anything that is too small for the file.

This software in front of these few must not delete, otherwise most browsers can not read out this font file.

If the export of PNG24 from PS is distorted when importing font files, you can try to convert the vector graph in PS into PNG24 after saving.