CSS3 using a custom font to implement small icons icon

Recently in doing a project, studied the front of Sina Weibo, see the first page of that icon, the previous view of this kind of effect of the first reaction is to use an icon such as GIF to make!!

But in the course of the study, a little trick was found to note that the text in the EM tag was E, but it showed an icon like icons.

Since it is written by html+css, it should be the result of the CSS control display.

Some of the other CSS basic no problem, understand, but only this font-family, forced to set into a "wbficonregular", the general operating system should not have the name of the font bar!!

Again a bit of a mess of Google's debugger, found to have loaded font files!! And in one of the font files, found in the same shape as the first page icon things!!

Baidu, Woff is a font file!!

So I thought that there should be software to make their own font files. Baidu a bit, found the software called Fontcreator!!

File-> New

Character sets, font styles, and predefined outlines I'm going to do it by default, where predefined contour selections include outlines, so the new font file defaults to have a few characters, generally I directly modify on the line!!

For example, I'll change the number character 0. Right--> edit on number character 0

In the window that appears, you can drag the marquee in the middle of point 0 to modify its shape (just for instance)

=>

All right, save it!!

Next, use the fonts just made to HTML writing!!

Just to do an example, or to write CSS in HTML bar

The effect of Google browser

This time don't want to finish, with the evil of IE open look

Effect can't come out?? Baidu about CSS custom font compatibility issues

SOURCE Http://www.w3cplus.com/content/css3-font-face

First, TURETPE (. ttf) Format:

The. TTF font is the most common font for Windows and Macs, is a raw format, so he is not optimized for the site, browsers that support this font have "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile Safari4.2+ ";

Ii. OpenType (. OTF) Format:

The. OTF font is considered to be an original font format built on Turetype, so it also provides more functionality, and browsers that support this font have "Firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+ ";

Third, the Web Open Font format (. woff) Format:

The. Woff font is the best format for Web fonts, he is an open Truetype/opentype compressed version and also supports the separation of meta packets, browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+ , opera11.1+ ";

Four, Embedded Open Type (. EoT) Format:

The. EoT font is an IE-specific font that you can create from TrueType fonts, and browsers that support this font have "ie4+";

V. SVG (. svg) Format:

. svg fonts are a format based on SVG font rendering, and browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+".

This means that in @font-face we need at least. Woff,.eot two format fonts, and even the need for. svg and other fonts to achieve more browsing version of the support.

(Here, I stole a little lazy, I still use TTF, because I have not found a good point of TTF to Woff software)

This one, TTF turn eot, need a small software, download address http://download.csdn.net/detail/u010488325/6235387

One more f.eot next to F.ttf.

Use CSS hack to add f.eot files to previous font references

Look at the effect

To sum up,

In this way to some a label ul in the LI tag plus an icon, in fact very convenient, and as long as the production of the font file content is not much, its size is a few K bar, in some cases relative to the picture of the icon better.

In addition, this method to do the icon, can only be pure color, like some icon is a gradient effect, or with the picture will be better, this in the development of their own measure Bai.